• gulp is a build tool that runs on a Node.js-based platform using the modular syntax of commonJs.

  • We use packages that gulp needs
  • A TASK task, corresponding to a package, corresponding to a processing logic,
  • gulp.series corresponds to synchronous tasks, which are executed from left to right in turn. Long time
  • gulp.parallel corresponds to asynchronous tasks, which have high efficiency and short time.
  • gulp.src indicates where the file is read
  • gulp.dest indicates where the file is exported

const gulp = require('gulp');   //gulp package 
const eslint = require('gulp-eslint'); //Packet grammar checking for eslint 
const babel = require('gulp-babel');      //babel package for compiling ES grammar 
const browserify = require('gulp-browserify');  //Tools for compiling commonJs syntax
const rename = require("gulp-rename");    //Rename the package of the file
const less = require('gulp-less');   // gulp package identifying less file
const livereload = require('gulp-livereload');   //Packets for monitoring files
const connect = require('gulp-connect');    // Hot Update Package
const open = require("open");   //Open Packets for Web Pages
const uglify = require('gulp-uglify');   //Packages that compress JS code
const LessAutoprefix = require('less-plugin-autoprefix'); //Plug-in Pack Mixing LESS Files
// https://github.com/browserslist/browserslist   
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });  //Expanding Packages for CSS Recognition
const cssmin = require('gulp-cssmin');  //Compressing CSS Packets
const concat = require('gulp-concat');   //Packets for merging files 
const htmlmin = require('gulp-htmlmin');  //Compressing HTML Packets 


// Registration task
/*
  Development Routine:
    1. Go to https://gulpjs.com/plugins/search for related plug-ins gulp-xxx
    2. Open the npm repository of the plug-in to see how the document is used
    3. Download and introduce gulp plug-in
    4. Configuring plug-in tasks
 */

// Syntax checking must have an eslink configuration file
gulp.task('eslint', function () {
  // Read all js files, and the return value is a readable stream
  return gulp.src(['src/js/*.js'])
    // Syntax Checking of Files/Data in Convection
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(livereload());
})

// grammatical transformation
// babel can convert es6 modular grammar into commonjs modular grammar
// Converting es6 and above grammars to es5 and below
gulp.task('babel', () =>
  // Read all js files
  gulp.src('src/js/*.js')
    // Conversion of grammar
    .pipe(babel({
      presets: ['@babel/preset-env'] //There is something wrong with the official website.
    }))
    // Export out
    .pipe(gulp.dest('build/js'))
    .pipe(livereload())
);

// Converting the modular syntax of commonjs into browser-recognizable syntax
gulp.task('browserify', function() {
  // Just put in the entry file.
  return gulp.src('build/js/app.js')
    .pipe(browserify())
    // rename file
    .pipe(rename("built.js"))
    .pipe(gulp.dest('build/js'))
    .pipe(livereload());
});

// Compressing js code
gulp.task('uglify', function () {
  return gulp.src('./build/js/built.js')
    .pipe(uglify())
    .pipe(rename('dist.min.js'))
    .pipe(gulp.dest('dist/js'))
})

// Compile less to css
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build/css'))
    .pipe(livereload());
});

// Compress css
gulp.task('css', function () {
  return gulp.src('./src/less/*.less')
    .pipe(concat('dist.min.css'))
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
});

// Compress html
gulp.task('html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true, // Remove blank space
      removeComments: true // Remove annotations
    }))
    .pipe(gulp.dest('dist'));
});

// Automation - > Auto Compilation - > Auto Refresh Browser (Hot Update) > Auto Open Browser
gulp.task('watch', function() {
  livereload.listen();
  // Open the server
  connect.server({
    name: 'Dev App',
    root: ['build'],
    port: 3000,
    livereload: true  //Hot update
  });
  // Open the browser
  open('http://localhost:3000');
  
  // Monitor the specified file and perform subsequent tasks as soon as the file changes
  gulp.watch('src/less/*.less', gulp.series('less'));
  gulp.watch('src/js/*.js', gulp.series('js-dev'));
});

// Configure default tasks - > perform multiple tasks
gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); // Synchronized sequential execution, only one task can be executed at the same time slowly
gulp.task('js-prod', gulp.series('js-dev', 'uglify'));
// Gulp. task ('default', gulp. parallel ('eslint','babel','browserify'); // asynchronous execution, multi-task execution at the same time is fast
gulp.task('build', gulp.parallel('js-dev', 'less'));
// Directive for production environment: gulp prod
gulp.task('prod', gulp.parallel('js-prod', 'css', 'html'));
// Directives for the development environment: gulp start
gulp.task('start', gulp.series('build', 'watch'));

The above includes the basic use of all gulp engineering packages and annotations, like the friends you want to collect! ___________