Gulp operation and Gulpfile.js configuration

console input, Running Gulp

Default

Gulpfile.js

varGulp = require (' Gulp '),//Get GulpHtmlmin = require ("Gulp-htmlmin"),//compress page JavaScript, CSS, remove page spaces, comments, delete extra attributes, and moreImagemin = require ("Gulp-imagemin"),//Compress picture FilesCache = require (' Gulp-cache '),//compress only the modified picturesPngquant = require (' imagemin-pngquant '),//Deep Compress pictureless = require ("gulp-less"),//compiling the less file into CSSSourcemaps = require (' Gulp-sourcemaps '),//Generate Sourcemap fileCssmin = require ("Gulp-clean-css"),//Compress CSS FilesUglify = require ("Gulp-uglify"),//compressing JavaScript filesConcat = require ("Gulp-concat"),//reduce network requests by merging JavaScript filesRev = require ("Gulp-rev-append"),//Reference Add version number, clear page reference cacheAutoprefixer = require ("Gulp-autoprefixer"),//automatically handle browser prefixesLivereload = require ("Gulp-livereload");//The browser automatically refreshes the page when the listening file changes//Defining Testhtmlmin TasksGulp.task (' Testhtmlmin ',function() {    //testhtmlmin Parameters    varOptions ={removecomments:true,//Clear HTML CommentsCollapsewhitespace:true,//Compress HTMLCollapsebooleanattributes:true,//omit the value of the Boolean attribute <input checked= "true"/> ==> <input/>Removeemptyattributes:true,//Delete all spaces as attribute values <input id= ""/> ==> <input/>Removescripttypeattributes:true,//Delete <script> type= "Text/javascript"Removestylelinktypeattributes:true,//Remove the Type= "Text/css" from <style> and <link>MINIFYJS:true,//Compress page JSMINIFYCSS:true //Compress page CSS    }; GULP.SRC (' *.html ')//The source file that the task targets. Pipe (Htmlmin (options))//The module that the task calls. Pipe (Gulp.dest ("));//the location of the task output});//Defining Testimagemin TasksGulp.task (' Testimagemin ',function() {    //testimagemin Parameters    varOptions ={optimizationlevel: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 optimizedUse: [Pngquant ()]//imagemin plugin for compressing PNG images with pngquant depth    }; GULP.SRC (‘*. {Png,jpg,gif,ico} ')//The source file that the task targets. Pipe (Imagemin (options))//The module that the task calls. Pipe (Cache (Imagemin (options)))//compress only the modified pictures. Pipe (Gulp.dest ("));//the location of the task output});//Defining testless TasksGulp.task (' testless ',function() {    //cssmin Parameters    varOptions ={advanced:false,//type: Boolean default: True [whether to turn on advanced optimizations (merge selectors, etc.)]Compatibility: ' IE7 ',//Preserve IE7 and the following compatible wording types: String default: "or ' * ' [Enable compatibility mode; ' IE7 ': IE7 compatibility mode, ' IE8 ': IE8 compatibility Mode, ' * ': ie9+ compatibility mode]Keepbreaks:true,//type: Boolean default: False [Leave line wrapping]Keepspecialcomments: ' * '//Keep all special prefixes when you use the autoprefixer generated browser prefix, if you do not add this parameter, it is possible that your partial prefix will be deleted    }; //compile all less files in the SRC directory    //in addition to Reset.less and test.less (* * 0 or more subfolders matching src/less)GULP.SRC ([' src/less/*.less ', '!src/less/**/{reset,test}.less '])//The source file that the task targets. Pipe (Sourcemaps.init ())//The module that the task callsPipe (less ()). Pipe ( sourcemaps.write ()). Pipe (Cssmin (options))//compatible with IE7 and the following settings compatibility properties are required. Pipe (cssmin ({compatibility: ' IE7 '})). Pipe (Livereload ()); . Pipe (Gulp.dest (‘‘));//the location of the task output});//Defining Testjs TasksGulp.task (' Testjs ',function() {    //uglify Parameters    varOptions ={mangle:true,//type: Boolean default: True if variable name is modifiedCompresstrue,//type: Boolean default: True whether fully compressedPreservecomments: ' All ',//Keep all Commentsmangle: {except: [' Require ', ' exports ', ' module ', ' $ ']        } //Exclude Obfuscation keywords    }; //multiple files are passed in as an array    //gulp.src ([' Src/js/index.js ', ' src/js/detail.js '])//source file for the task    //compress all JS files in the Src/js directory    //in addition to Test1.js and test2.js (* * 0 or more subfolders matching SRC/JS)GULP.SRC ([' Src/js/*.js ', '!src/js/**/{test1,test2}.js ']). PIPE (Uglify (options))//The module that the task calls. Pipe (Concat (' bundle.js '))//the merged file name. Pipe (Gulp.dest ("));//the location of the task output});//Defining Testrev Tasks//HTML Templates//<!doctype html>//////<link rel= "stylesheet" href= "Css/[email protected] @hash" >//<script src= "Js/[email protected] @hash" ></script>//<script src= "Js/js-two.js" ></script>////<body>//<div>hello, world!</div>////<script src= "Js/[email protected] @hash" ></script>//</body>//Gulp.task (' Testrev ',function() {GULP.SRC (' name.html ')//The source file that the task targets. Pipe (rev ())//The module that the task calls. Pipe (Gulp.dest ("));//the location of the task output});//Defining TESTAUTOFX TasksGulp.task (' TESTAUTOFX ',function() {    //uglify Parameters    varOptions ={browsers: [' Last 2 versions ', ' Android >= 4.0 '],//https://github.com/ai/browserslist#queriesCascadetrue,//whether to beautify the property value default: True like this:-webkit-transform:rotate (45deg); Transform:rotate (45deg);Removetrue //Do you want to remove unnecessary prefixes by default: True    }; GULP.SRC (' Name.css ')//The source file that the task targets. Pipe (Autoprefixer (options))//The module that the task calls. Pipe (Gulp.dest ("));//the location of the task output});//start this task at the command line Gulp AutoGulp.task (' Auto ',function() {Livereload.listen (); //listen for file modifications and perform less tasks when files are modifiedGulp.watch (' views/less/**.less ', [' less '])})//define default tasks using Gulp.task (' Default ')//to start a later task using gulp at the command lineGulp.task (' Default ', [' testhtmlmin ', ' testimagemin ', ' testless ', ' Testjs ', ' testrev ', ' TESTAUTOFX '])

Gulp operation and Gulpfile.js configuration