Gulp-gulpfile.js Syntax Description

About Gulpfile file: Directly on the code bar!!

/*! * Gulp * $ npm Install gulp Gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter g Ulp-jshint gulp-rev-append Gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del--save-dev /c1>*/ //Load PluginsvarGulp = require (' Gulp '),//you must first introduce the Gulp plugindel = require (' del '),//File DeletionSass = require (' Gulp-ruby-sass '),//Sass Compilingcached = require (' gulp-cached '),//caches files in the current task, allowing only modified files to pass through the pipelineUglify = require (' gulp-uglify '),//JS CompressionRename = require (' Gulp-rename '),// RenamingConcat = require (' Gulp-concat '),//Merging FilesNotify = require (' gulp-notify '),//equivalent to Console.log ()Filter = require (' Gulp-filter '),//Filter to filter the specified fileJshint = require (' Gulp-jshint '),//JS Syntax CheckRev = require (' Gulp-rev-append '),//Insert File Thumbprint (MD5)Cssnano = require (' Gulp-cssnano '),//CSS CompressionImagemin = require (' Gulp-imagemin '),//Picture OptimizationBrowsersync = require (' Browser-sync '),//Save Auto RefreshFileinclude = require (' Gulp-file-include '),//can include HTML filesAutoprefixer = require (' gulp-autoprefixer ');//Add CSS Browser prefixes //SassGulp.task (' sass ',function() {  returnSass (' Src/sass/**/*.scss ', {style: ' expanded '})//all. scss files in the incoming SASS directory and subdirectories generate a file stream through the pipeline and set the output format. pipe (Cached (' sass '))//cache incoming files, only let the modified files pass through the pipeline (the first execution is all through, because there is no record cache). Pipe (Autoprefixer (' last 6 version '))//add CSS browser prefix, compatible with the latest 5 versions. Pipe (Gulp.dest (' dist/css '))//output to the DIST/CSS directory (does not affect the file stream in this pipeline). Pipe (rename ({suffix: '. Min '}))//Add the. min Rename to the file stream in the pipeline. Pipe (Cssnano ())//Compress CSS. Pipe (Gulp.dest (' dist/css '))//output to Dist/css directory, at which time each file has a compression (*.MIN.CSS) and uncompressed (*.CSS) two versions}); //css (copy *.min.css, normal CSS output compression and uncompressed two versions)Gulp.task (' CSS ',function() {  returnGULP.SRC (' Src/css/**/*.css '). Pipe (Cached (' CSS '). Pipe (Gulp.dest (' Dist/css '))//output all the files in the pipeline to the DIST/CSS directory. pipe (Filter ([' **/* ', '!**/*.min.css '))//filter out non-*.min.css files in the pipeline. Pipe (Autoprefixer (' last 6 version '). Pipe (Gulp.dest (' Dist/css '))//output the processed CSS to the DIST/CSS directory. Pipe (rename ({suffix: '. Min ')}). Pipe (Cssnano ()). Pipe (Gulp.dest (' Dist/css '))}); //Stylereload (combined with watch task, no refresh CSS injection)Gulp.task (' Stylereload ', [' sass ', ' CSS '),function() {  returnGULP.SRC ([' Dist/css/**/*.css ']). Pipe (Cached (' Style ') . Pipe (Browsersync.reload ({stream:true}));//inject CSS with no refresh Browsersync}); //script (copy *.min.js, normal JS output compression and uncompressed two versions)Gulp.task (' script ',function() {  returnGULP.SRC ([' Src/js/**/*.js ']). Pipe (Cached (' Script '). Pipe (Gulp.dest (' Dist/js ') . Pipe (Filter ([' **/* ', '!**/*.min.js '))//filter out non-*.min.js files in the pipeline    //. Pipe (Jshint ('. Jshintrc '))//JS check and merge, open as needed    //. Pipe (Jshint.reporter (' Default '))    //. Pipe (concat (' main.js '))    //. Pipe (Gulp.dest (' Dist/js ')). Pipe (rename ({suffix: '. Min ')}). Pipe (Uglify ()). Pipe (Gulp.dest (' Dist/js '))}); //ImageGulp.task (' Image ',function() {  returnGULP.SRC (' src/img/**/*.{ Jpg,jpeg,png,gif} '). Pipe (Cached (' Image ') . Pipe (Imagemin ({optimizationlevel):3, Progressive:true, Interlaced:true, Multipass:true}))    //Value range: 0-7 (Optimization level), whether lossless compression jpg picture, whether interlaced GIF rendering, whether to optimize SVG multiple times until fully optimized. Pipe (Gulp.dest (' dist/img '))}); //HTML compiles HTML files and copies fontsGulp.task (' HTML ',function () {  returnGULP.SRC (' src/*.html '). Pipe (Fileinclude ())//include HTML. Pipe (rev ())//Build and insert MD5. Pipe (Gulp.dest (' dist/'))}); //Clean Empty dist directoryGulp.task (' Clean ',function() {  returnDel (' dist/**/* ');}); //build, connected to perform all compilation tasksGulp.task (' Build ', [' sass ', ' CSS ', ' script ', ' image '),function() {Gulp.start (' HTML ');}); //default task, dependent on empty taskGulp.task (' Default ', [' Clean '],function() {Gulp.start (' Build ');}); //Watch turn on the local server and listenGulp.task (' Watch ',function() {browsersync.init ({server: {baseDir:' Dist '//start the local server environment in the Dist directory and start the default browser automatically    }  }); //Monitor the SASS file and execute CSS injection if there is a changeGulp.watch (' src/sass/**/*.scss ', [' stylereload ']); //monitor CSS files and execute CSS injection if there is a changeGulp.watch (' src/css/**/*.css ', [' stylereload ']); //Monitor JS files and execute script tasks with changesGulp.watch (' src/js/**/*.js ', [' script ']); //monitor image files, and perform image tasks with changesGulp.watch (' src/img/**/* ', [' image ']); //Monitor HTML files and perform HTML tasks with changesGulp.watch (' src/**/*.html ', [' HTML ']); //Monitor changes outside the CSS directory (such as JS, images, etc.) in the Dist directory to automatically refresh the pageGulp.watch ([' dist/**/* ', '!dist/css/**/* ']). On (' Change ', Browsersync.reload); });

Gulp-gulpfile.js Syntax Description