Gulp Configuration Implementation Modify JS, CSS, HTML auto-refresh

Write in front:

This configuration supports ES6, less

1. First

Give the initial directory structure

Gives the directory structure after executing the gulp

Gives the directory structure after executing gulp--p

2.package.json is a write. The file describes the configuration information for the NPM package (author, profile, package dependencies, etc.) and the required modules.

{  "name": "Grunttest",   "version": "1.0.0",  "description": "",  "main": "Gulpfile.js"}

3.gulpfile.js adding a task to perform

var gulp = require (' gulp '); var uglify = require (' gulp-uglify ');  JS compression var concat = require (' Gulp-concat ');  Merge file var minifycss = require (' gulp-minify-css ');  CSS compression var less = require (' gulp-less '); Lessvar changedinplace = require (' gulp-changed-in-place ');//no matter which file is modified, gulp will simplify the HTML file in dest = minifyhtml ('  Gulp-htmlmin '); Simplified Htmlvar Browsersync = require (' Browser-sync '). Create (); Auto Refresh var Babel = require (' Gulp-babel '); Support Es6var argv = require (' Yargs '). argv; Support for different environments var sequence = require (' gulp-sequence ');  Execute var watch = require (' watch ') in order;  Monitor var clean = require (' Gulp-clean '); Monitor//NPM install--save-dev gulp-babel babel-preset-es2015var DEST = ' dest/'; var html_path = './src/*.html '; Gulp.task (' Minify-js ', function () {if (ARGV.P) {gulp.src (' src/source/*.js '). Pipe (Babel ({presets: [' es2015 ']}). Pipe (Uglify ()). Pipe (concat (' gruntTest.min.js ')). Pipe (Gulp.dest (dest+ ' JS '))}else{gulp.src (' src/source/*.js '). Pipe (Babel ({ Presets: [' es2015 ']}). Pipe (Uglify ()). Pipe (Concat (' GrunttesT.min.js '). Pipe (Gulp.dest (' Src/js ')}}), Gulp.task (' Minify-css ', function () {if (ARGV.P) {gulp.src (' src/less/*. Less ')//or with [' src/less/p1.less ', ' src/less/p2.less '].pipe (Less ()). Pipe (Minifycss ()). Pipe (Concat (' style.min.css ') ). Pipe (Gulp.dest (dest+ ' CSS ')). Pipe (Browsersync.stream ()); ELSE{GULP.SRC (' src/less/*.less ')//or with [' src/less/p1.less ', ' src/less/p2.less '].pipe (Less ()). Pipe (Minifycss ()). Pipe (concat (' style.min.css ')). Pipe (Gulp.dest (' src/css ')). Pipe (Browsersync.stream ());}); Gulp.task (' minify-html ', function () {GULP.SRC (Html_path). Pipe (Changedinplace ({firstpass:true})). Pipe (Minifyhtml ( {collapsewhitespace:true})). Pipe (Gulp.dest (dest)). Pipe (Browsersync.stream ());}); Gulp.task (' Clean ', function () {GULP.SRC (['./src/css/*.css ', './src/js/*.js '], {read:false}). Pipe (Clean ());}); var files = ['./src/css/*.css ', './src/js/*.js '];gulp.task (' Browser-sync ', function () {Browsersync.init (files,{ Server: {baseDir: './'},port:9999});}); Gulp.task (' Watch ', function () {Gulp.watch ('./src/source/*.js '), [' MiNify-js ']); Gulp.watch ('./src/less/*.less ', [' minify-css ');}); if (ARGV.P) {//productgulp.task (' default ', Sequence (' Minify-js ', ' minify-css ', ' minify-html ', ' Browser-sync '));} Else{//developgulp.task (' Default ', sequence (' Clean ', ' minify-js ', ' minify-css ', ' watch ', ' Browser-sync '));

4. Expansion

(1) above a bunch of require look good annoying, also very large. The "Gulp-load-plugins" plugin can be introduced here

var gulploadplugins = require (' Gulp-load-plugins '),      plugins = Gulploadplugins ();p lugins.uglify (), can perform the corresponding task

(2) If a folder under a lot of files, then watch monitoring needs to enumerate, can be written in JSON format (such as Src.source.*.js). By introducing the "FS" plug-in, use the Fs.freaddirsync () method to read the path. Loop, the implementation here is purely write JS code.

　　

　　

Gulp Configuration Implementation Modify JS, CSS, HTML auto-refresh