Gulp Combat (ii)

I. Configuring the Environment

1. Nodejs-based installation Git,npm,gulp

2. Install all kinds of plugins

3. Reference documentation

• Http://www.tuicool.com/articles/UbaqyyJ
• Http://www.tuicool.com/articles/QzaqAbF
• http://www.gulpjs.com.cn/docs/api/
• 1190000002932998

Two. Test Project structure

Three. Configuration file code

varGulp = require (' Gulp ')), Del= Require (' del '),//Delete files/foldersGULPIF = require (' gulp-if ')), Gulpsequence= Require (' gulp-sequence '),//Gulp sequential execution of task pluginsImagemin = require (' Gulp-imagemin '),//compress picture files (including PNG, JPEG, GIF, and SVG pictures)Cache = require (' Gulp-cache '),//cache proxy for GulpConcat = require (' Gulp-concat ');//multiple files merged into onevarNano = require (' Gulp-cssnano '),////Remove whitespace and comments, and compress codePOSTCSS = require ("Gulp-postcss"),//CSS pre-compilerSprites = require (' postcss-sprites ').default,//CSS WizardAutoprefixer = require (' Autoprefixer '),//Auto-complete browser compatibility prefixCssgrace = require (' Cssgrace ');//CSS post-processing tool, HackievarUglify = require (' gulp-uglify ');//compressing JS files by UglifyjsvarRev = require (' Gulp-rev '),//add MD5 suffix to file nameRevcollector = require (' Gulp-rev-collector ');//The plugin is to get the static resource version data from the manifests, which is generated by different streams and replaces the links in the HTML.varminifyhtml = require (' gulp-minify-html ');//Compress HTML filesvarUsemin = require (' Gulp-usemin '),//used to replace script and stylesheets that are not optimized in the HTML file (or templates/views) with an optimized versionLivereload = require (' Gulp-livereload ')), notify= Require (' gulp-notify ');varSrc_dir = './src/';varDst_dir = './dist/';varCondition =true; Gulp.task (' Clean ',function() {    returnDel ([' Dist ']);});/** * Compress pictures*/Gulp.task (' Min-img ',function() {gulp.src (Src_dir+ '/img/*. {Png,jpg,gif,ico} '). Pipe (Cache (Imagemin ({//read from the cache, OK, only for the modified pictureOptimizationlevel:5,//Type: Number default: 3 Value range: 0-7 (optimization level)Progressivetrue,//type: Boolean default: False lossless compression jpg pictureInterlaced:true,//type: Boolean default: False to render with interlaced GIFMultipass:true,//type: Boolean default: False optimizes SVG multiple times until fully optimizedSvgoplugins: [{removeviewbox:false}],//do not remove the SVG Viewbox propertyProgressivetrue})). Pipe (Gulp.dest (Dst_dir+ '/img ');//Output Directory});/** * Compress CSS*/Gulp.task ("MIN-CSS-PC",function() {    //Postcss    varprocessors =[Sprites ({' Stylesheetpath ': Src_dir + '/css/',            ' Spritepath ': Dst_dir + '/img/'}), Autoprefixer ({browsers: [' > 1% ', ' last 2 versions ', ' IE 6-11 ']}), Cssgrace]; returnGULP.SRC ([Src_dir + '/css/**/*.css ')]). Pipe (Nano ({discardcomments: {removeall:true}). Pipe (POSTCSS (processors)). PIPE (Gulp.dest (Dst_dir+ '/css/'));});/** * Compression js*/Gulp.task (' Min-js ',function() {    returnGULP.SRC (Src_dir + '/js/**/*.js ')). Pipe (Uglify ()). Pipe (Gulp.dest (Dst_dir+ '/js/'));});/** Compressed and versioned JS*/Gulp.task (' Rev-min-js ',function() {    returnGULP.SRC (Src_dir + '/js/**/* ')). Pipe (Concat (' All.min.js '). Pipe (Uglify ()). PIPE ( rev ()). Pipe (Gulp.dest (Dst_dir+ '/js/') . Pipe (Rev.manifest ()). Pipe (Gulp.dest (Dst_dir+ '/rev/js '));});/** * Compressed version of CSS*/Gulp.task ("Rev-min-css",function() {    //Postcss    varprocessors =[Sprites ({' Stylesheetpath ': Src_dir + '/css/',            ' Spritepath ': Dst_dir + '/img/'}), Autoprefixer ({browsers: [' > 1% ', ' last 2 versions ', ' IE 6-11 ']}), Cssgrace]; returnGULP.SRC ([Src_dir + '/css/**/*.css ')]). Pipe (Concat (' All.min.css '))//the merged file. Pipe (Nano ({discardcomments: {removeall:true}). Pipe (rev () )//version of. Pipe (POSTCSS (processors))//Sprite graph generation, browser prefix auto-completion, IE hacker. Pipe (Gulp.dest (dst_dir + '/css/')) . Pipe (Rev.manifest ()). Pipe (Gulp.dest (Dst_dir+ '/rev/css '));});/** * Compress HTML into version number file*/Gulp.task (' Rev-min-html ',function() {    returnGULP.SRC ([Dst_dir + '/rev/**/*.json ', Src_dir + '/view/**/*.html ']. Pipe (Revcollector ()). Pipe (GULPIF (condition, minifyhtml ({empty:true, Spare:true, Quotes:true})). Pipe (Gulp.dest (Dst_dir+ '/view '));});/** PC Packaging Solution*/Gulp.task (' PC ', Gulpsequence (' Clean ', ' min-img ', ' rev-min-css ', ' rev-min-js ', ' rev-min-html ')); Gulp.task (' Default ', [' PC '],function() {    //return del ([' tmp/']);});

Four. Effects

• CMD Run Command Gulp

Gulp Combat (ii)