Gulp (i)

I. INTRODUCTION

Gulp is a NODEJS-based automatic task runner that automates the testing, checking, merging, compressing, formatting, automatic browser refresh, and deployment file generation of JAVASCRIPT/COFFEE/SASS/LESS/HTML/IMAGE/CSS and other files. And listen for files that repeat the specified steps after the change.

In the implementation, gulp borrowed from the UNIX operating system pipeline (pipe) thought, the previous level of output, directly into the back-level input, making it very simple to operate.

Two. Configuration files

varGulp = require (' Gulp '));vardel = require (' del ');//Delete files/foldersvarRev = require (' Gulp-rev ');//add MD5 suffix to file namevarNano = require (' Gulp-cssnano ');//remove whitespace and comments, and compress codevarUglify = require (' gulp-uglify ');//compressing JS files by UglifyjsvarUseref = require (' Gulp-useref '));varImagemin = require (' gulp-imagemin ');//compress picture files (including PNG, JPEG, GIF, and SVG pictures)varRevcollector = require (' Gulp-rev-collector ');//Path SubstitutionvarBrowsersync = require (' Browser-sync '). Create ();//static file server, also supports automatic browser refreshvarGulpsequence = require (' gulp-sequence '));varUncss = require (' gulp-uncss '));varHtmlmin = require (' gulp-htmlmin '));varBase64 = require (' gulp-base64 '));varChanged = require (' gulp-changed '));varPOSTCSS = require ("Gulp-postcss");//CSS pre-compilervarSprites = require (' postcss-sprites ').default;//CSS WizardvarAutoprefixer = require (' autoprefixer ');//Auto-complete browser compatibility prefixvarCssgrace = require (' Cssgrace ');//CSS post-processing tool, HackievarSrc_dir = './src/';varPkg_dir = './tmp/pkg/';varRev_dir = './tmp/rev/';varDst_dir = './dist/';varUncss_reg = [/.advise/,/.block/,/.g-bd. m-view-2. Category li:nth-child/,/^.g-bd ul Li info/,/.hljs/];gulp.task (' Clean ',function() {    returnDel ([' Dist ', ' tmp ']);});/** Merge Request * <!--build:css. /css/index.pkg.css--><!--Endbuild---<!--Build:js. /js/index.pkg.js--><!--endbuild --*/Gulp.task (' Pkg ',function() {    returnGULP.SRC (Src_dir + ' view/*.html ')). Pipe (Useref ()). Pipe (Gulp.dest (Pkg_dir+ ' view/'));});/** Move non-jpg/png resources to img folder **/Gulp.task (' Move-img-other ',function() {    returnGULP.SRC ([Src_dir + ' img/**/*.*! ( Jpg|png) ', Src_dir + ' component/img/**/*.*! (jpg|png) ']). Pipe (Gulp.dest ('./tmp/pkg/img/'));});/** Compression img **/Gulp.task (' Min-img ',function() {    returnGULP.SRC ([Src_dir + ' img/**/*.* (jpg|png) ', Src_dir + ' component/img/**/*.* (jpg|png) ']). Pipe (Imagemin ()). Pipe (Gulp.dest ('./tmp/pkg/img/'));});/** Compression css (PC) **/Gulp.task ("MIN-CSS-PC",function() {    //Postcss    varprocessors =[Sprites ({' Stylesheetpath ': Pkg_dir + ' css/',            ' Spritepath ': Pkg_dir + ' img/'}), Autoprefixer ({browsers: [' > 1% ', ' last 2 versions ', ' IE 6-11 ']}), Cssgrace]; returnGULP.SRC ([Pkg_dir + ' css/**/*.css ')]). Pipe (Nano ({discardcomments: {removeall:true}). Pipe (POSTCSS (processors)). PIPE (Gulp.dest (Pkg_dir+ ' css/'))});/** Compression css (Mobile) **/Gulp.task ("Min-css-mobile",function() {    //Postcss    varprocessors =[Autoprefixer ({browsers: [' > 1% ', ' last 2 versions ']        })    ]; returnGULP.SRC ([Pkg_dir + ' css/**/*.css ')]). Pipe (UNCSS ({html: [Pkg_dir+ ' **/*.html '], Ignore:uncss_reg}). Pipe (Nano ({discardcomments: {removeall:true}). Pipe (POSTCSS (processors)). PIPE (Gulp.dest (Pkg_dir+ ' css/'))});/** Compression JS **/Gulp.task (' Min-js ',function() {    returnGULP.SRC (Pkg_dir + ' js/**/*.js ')). Pipe (Uglify ()). Pipe (Gulp.dest (Pkg_dir+ ' js/'));});/** Version of IMG **/Gulp.task (' Rev-img ',function() {    returnGULP.SRC (Pkg_dir + ' img/**/* ')). Pipe (rev ()). Pipe (Gulp.dest (Rev_dir+ ' img/') . Pipe (Rev.manifest ()). Pipe (Gulp.dest (Rev_dir+ ' img/'));});/** version of CSS **/Gulp.task (' Rev-css ',function() {    returnGULP.SRC (Pkg_dir + ' css/**/* ')). Pipe (rev ()). Pipe (Gulp.dest (Rev_dir+ ' css/') . Pipe (Rev.manifest ()). Pipe (Gulp.dest (Rev_dir+ ' css/'));});/** version of JS **/Gulp.task (' Rev-js ',function() {    returnGULP.SRC (Pkg_dir + ' js/**/* ')). Pipe (rev ()). Pipe (Gulp.dest (Rev_dir+ ' js/') . Pipe (Rev.manifest ()). Pipe (Gulp.dest (Rev_dir+ ' js/'));});/** Collect images to CSS*/Gulp.task (' Col-css ',function() {    returnGULP.SRC ([Rev_dir + ' Img/*.json ', Rev_dir + ' css/*.css ']). Pipe (Revcollector ()). Pipe (Gulp.dest (Dst_dir+ ' css/'));});/** Move img files to destination folder*/Gulp.task (' Col-img ',function() {    returnGULP.SRC ([Rev_dir + ' img/* ', '! ' + rev_dir + '/img/*.json ']). Pipe (Gulp.dest (Dst_dir+ ' img/'));});/** Move the JS file to the destination folder*/Gulp.task (' Col-js ',function() {    returnGULP.SRC (Rev_dir + ' js/*.js ')). Pipe (Gulp.dest (Dst_dir+ ' js/'));});/** Collect resources to HTML*/Gulp.task (' Col-html ',function() {    returnGULP.SRC ([Rev_dir + ' **/*.json ', Pkg_dir + ' view/*.html ']). Pipe (Revcollector ()). Pipe (Htmlmin ({//Collapsewhitespace:true,Removecomments:true}). Pipe (Gulp.dest (Dst_dir+ ' view/'));});/** Picture Base64*/Gulp.task (' Base64 ',function() {    returnGULP.SRC (Pkg_dir + '/**/*.css ')). Pipe (Base64 ({extensions: [' SVG ', ' png ',/\.jpg#datauri$/i],}). Pipe (Gulp.dest (Pkg_dir));});/** Move mock folder*/Gulp.task (' Move-mock ',function() {    returnGULP.SRC (Src_dir + ' mock/**/* ')). Pipe (Gulp.dest (Dst_dir+ ' mock/'));});/** Static Server*/Gulp.task (' BS ',function() {Browsersync.init ({files:"**",//listen to the whole projectOpen: "External", server: {baseDir:"./dist/", Index:' View/index.html '        }    });});/** Static server (proxy)*/Gulp.task (' BSP ',function() {browsersync.init ({proxy:"127.0.0.1"    });});/** PC Packaging Solution*/Gulp.task (' PC ', Gulpsequence (' Clean ', ' pkg ', ' min-img ',     [' Min-img ', ' min-css-pc ', ' min-js ', ' Move-img-other ',     [' Rev-img ', ' rev-css ', ' Rev-js '],     [' Col-img ', ' col-css ', ' col-js ', ' col-html '],    ' Move-mock ', ' BS '));/** Mobile Packaging solution*/Gulp.task (' Mobile ', Gulpsequence (' Clean ', ' pkg ', ' min-img ', ' base64 ', ' Move-img-other ',    [' Min-img ', ' min-css-mobile ', ' Min-js '],     [' Rev-img ', ' rev-css ', ' Rev-js '],     [' Col-img ', ' col-css ', ' col-js ', ' col-html '],    ' Move-mock ', ' BS ')); Gulp.task (' Default ', [' PC '],function() {    returnDel ([' tmp/']);});

Gulp (i)