Proficient in common gulp plug-ins
Match characters *, *,! , {} gulp.src ('. / js/*.js') / / * matches all files in .js format under the js folder gulp.src ('. / js/**/*.js') / / * * matches 0 or more subfolders of the js folder gulp.src (['. / jsstop. Match all js files except index.js gulp.src ('. / js/**/ {omui,common} .js') / {} match file names in {} operation del (alternative gulp-clean) var del = require ('del'); del ('. / dist'); / / delete the entire dist folder gulp-rename
Description: rename the file.
Var rename = require ("gulp-rename"); gulp.src ('. / hello.txt') .pipe (rename ('gb/goodbye.md')) / / modify the file name and path directly. Pipe (gulp.dest ('. / dist')) Gulp.src ('. / hello.txt') .pipe (rename ({dirname: "text", / / path name basename: "goodbye", / / main file name prefix: "pre-", / / prefix pipe: "- min" / / suffix extname: ".html" / / extension}) .pipe (gulp.dest ('. / dist')) Gulp-concat
Description: merge files.
Var concat = require ('gulp-concat'); gulp.src ('. / js/*.js') .pipe (concat ('all.js')) / / merge all.js file .pipe (gulp.dest ('. / dist')) Gulp.src (['. / js/demo1.js','./js/demo2.js','./js/demo2.js']) .pipe (concat ('all.js')) / / merge files in the order in []. Pipe (gulp.dest ('. / dist')); gulp-filter
Description: filter files in a virtual file stream.
Var filter = require ('gulp-filter'); const f = filter ([' * *','! * / index.js']); gulp.src ('js/**/*.js') .pipe (f) / / filter out the file index.js. Pipe (gulp.dest (' dist')); const F1 = filter (['* *','! * / index.js'], {restore: true}) Gulp.src ('js/**/*.js') .pipe (F1) / / filter out the file index.js. Pipe (uglify ()) / / compress other files. Pipe (f1.restore) / / return to all files that are not filtered. Pipe (gulp.dest (' dist')) / / operate on all files again, including index.js compression gulp-uglify
Description: compress the js file size.
Var uglify = require ("gulp-uglify") Gulp.src ('. / hello.js') .pipe (uglify ()) / / directly compress hello.js .pipe (gulp.dest ('. / dist')) gulp.src ('. / hello.js') .pipe (uglify ({mangle: pipe, / / whether to modify the variable name or not) Default is true compress: true, / / whether it is fully compressed, and default is true preserveComments: 'all' / / keep all comments})) .pipe (gulp.dest ('. / dist')) gulp-csso
Description: compression optimized css.
Var csso = require ('gulp-csso'); gulp.src ('. / css/*.css') .pipe (csso ()) .pipe (gulp.dest ('. / dist/css')) gulp-html-minify
Description: compress HTML.
Var htmlminify = require ('gulp-html-minify'); gulp.src (' index.html') .pipe (htmlminify ()) .pipe (gulp.dest ('. / dist')) gulp-p_w_picpathmin
Description: compress the picture.
Var p_w_picpathmin = require ('gulp-p_w_picpathmin'); gulp.src ('. / img/*. {jpg,png,gif,ico}') .pipe (p_w_picpathmin ()) .pipe (gulp.dest ('/ dist/img')) gulp-zip
Description: ZIP compressed file.
Var zip = require ('gulp-zip'); gulp.src ('. / src/*'). Pipe (zip ('all.zip')) / / compressed into an all.zip file. Pipe (gulp.dest (' / dist')) JS/CSS is automatically injected into gulp-autoprefixer
Description: automatically add browser prefixes to css.
Var autoprefixer = require ('gulp-autoprefixer') Gulp.src ('. / css/*.css') .pipe (autoprefixer ()) / / add the prefix directly .pipe (gulp.dest ('dist')) gulp.src ('. / css/*.css') .pipe (autoprefixer ({browsers: ['last 2 versions'], / / browser version cascade:true / / landscaping attribute) Default true add: true / / whether to add a prefix, default true remove: true / / remove obsolete prefix, default true flexbox: true / / add prefix to flexbox attribute, default true}) .pipe (gulp.dest ('. / dist'))
See more configurations: options
More browser versions: browsers
Gulp-useref
Description: parses building blocks in HTML files instead of referencing unoptimized scripts and stylesheets.
/ / index.html// gulpfile.jsvar useref = require ('gulp-useref'); gulp.src (' index.html') .pipe (useref ()) .pipe (gulp.dest ('. / dist'))
After replacement, the index.html will become:
/ / the previous two have been replaced with one gulp-rev.
Description: add a hash value to the static resource file name: unicorn.css = > unicorn-d41d8cd98f.css
Var rev = require ('gulp-rev'); gulp.src ('. / css/*.css') .pipe (rev ()) .pipe (gulp.dest ('. / dist/css')) gulp-rev-replace
Description: overrides the file name renamed by gulp-rev.
Var rev = require ('gulp-rev'); var revReplace = require (' gulp-rev-replace'); var useref = require ('gulp-useref') Gulp.src ('index.html') .pipe (useref ()) / / replace css referenced in HTML and js .pipe (rev ()) / / give css,js Html plus the hash version number. Pipe (revReplace ()) / / replace the referenced css and js with the name with the version number. Pipe (gulp.dest ('. / dist')) gulp-html-replace
Description: replace the building blocks in html.
/ / index.html / / css is buildName, you can define / / gulpfile.jsvar htmlreplace = require ('gulp-html-replace'); gulp.src (' index.html') .pipe (htmlreplace ({'css':'all.css' / / css is buildName} defined in index.html)) .pipe (gulp.dest ('. / dist'))
After replacement, the index.html will become:
/ / the previous two have been replaced with a flow control gulp-if
Description: run a task conditionally.
Var gulpif = require ('gulp-if'); var uglify = require (' gulp-uglify'); var concat = require ('gulp-concat'); var condition = true; gulp.src ('. / js/*.js') .pipe (gulpif (condition, uglify (), concat ('all.js')) / / condition is true execute uglify (), else executes concat (' all.js') .pipe (gulp.dest ('. / dist/')); tool gulp-load-plugins
Description: load gulp plug-ins from package dependencies and attachments into an object for you to choose from.
/ / package.json "devDependencies": {"gulp": "^ 3.9.1", "gulp-concat": "^ 2.6.1", "gulp-rename": "^ 1.2.2", "gulp-uglify": "^ 2.0.1"} / / gulpfile.jsvar $= require ('gulp-load-plugins') () / / $is an object that loads the plug-in gulp.src ('. / * * / * js') .pipe ($.concat ('all.js')) / / using the plug-in you can use $.PluginsName () .pipe ($.uglify ()) .pipe ($.rename (' all.min.js')) .pipe (gulp.dest ('. / dist')) gulp-sass
Description: compile sass.
Var sass = require ('gulp-sass'); gulp.src ('. / sass/**/*.scss') .pipe (sass ({outputStyle: 'compressed' / / configure output mode, default is nested})) .pipe (gulp.dest ('. / dist/css')); gulp.watch ('. / sass/**/*.scss', ['sass']) / / listen for changes in sass files in real time and execute sass task gulp-babel
Description: compiles ES6 code into ES5.
Var babel = require ('gulp-babel'); gulp.src ('. / js/index.js') .pipe (babel ({presets: ['es2015']})) .pipe (gulp.dest ('. / dist'))
