• gulp 是一个构建东西，基于Node.js的平台运转，运用的是commonJs的模块化语法。

  • 我们运用gulp须要用到的包
  • 一个TASK使命，对应一个包，对应一个处置惩罚逻辑、
  • gulp.series对应的是同步使命，从左到右，顺次实行使命。时间长
  • gulp.parallel对应的是异步使命，效率高，时间短。
  • gulp.src 表明文件从那里读取
  • gulp.dest 表明文件输出到哪

const gulp = require('gulp');   //gulp的包 
const eslint = require('gulp-eslint'); //eslint的包  语法搜检 
const babel = require('gulp-babel');      //编译ES语法的babel包 
const browserify = require('gulp-browserify');  //编译commonJs语法的东西
const rename = require("gulp-rename");    //重命名文件的包
const less = require('gulp-less');   // 辨认less文件的gulp的包
const livereload = require('gulp-livereload');   //监控文件的包
const connect = require('gulp-connect');    // 热更新的包
const open = require("open");   //翻开网页的包
const uglify = require('gulp-uglify');   //紧缩JS代码的包
const LessAutoprefix = require('less-plugin-autoprefix'); //将LESS文件夹杂的插件包
// https://github.com/browserslist/browserslist   
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });  //拓展CSS辨认的包
const cssmin = require('gulp-cssmin');  //紧缩CSS的包
const concat = require('gulp-concat');   //兼并文件的包 
const htmlmin = require('gulp-htmlmin');  //紧缩HTML的包 


// 注册使命
/*
  开辟套路：
    1. 去https://gulpjs.com/plugins/搜相干的插件  gulp-xxx
    2. 翻开插件的npm堆栈 看文档运用
    3. 下载并引入gulp插件
    4. 设置插件使命
 */

// 语法搜检  必须有一个eslint的设置文件
gulp.task('eslint', function () {
  // 读取一切的js文件， 返回值就是一个可读流
  return gulp.src(['src/js/*.js'])
    // 对流中的文件/数据举行语法搜检
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(livereload());
})

// 语法转换
// babel能将es6模块化语法转换为commonjs模块化语法
// 能将es6及其以上的语法转换为es5及其以下的语法
gulp.task('babel', () =>
  // 读取一切js文件
  gulp.src('src/js/*.js')
    // 举行语法转换
    .pipe(babel({
      presets: ['@babel/preset-env'] //此处须要修正，官网有误
    }))
    // 输出出去
    .pipe(gulp.dest('build/js'))
    .pipe(livereload())
);

// 将commonjs的模块化语法转换成浏览器能辨认语法
gulp.task('browserify', function() {
  // 只需放进口文件
  return gulp.src('build/js/app.js')
    .pipe(browserify())
    // 重命名文件
    .pipe(rename("built.js"))
    .pipe(gulp.dest('build/js'))
    .pipe(livereload());
});

// 紧缩js代码
gulp.task('uglify', function () {
  return gulp.src('./build/js/built.js')
    .pipe(uglify())
    .pipe(rename('dist.min.js'))
    .pipe(gulp.dest('dist/js'))
})

// 将less编译成css
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build/css'))
    .pipe(livereload());
});

// 紧缩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'))
});

// 紧缩html
gulp.task('html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true, // 去除空格
      removeComments: true // 去掉解释
    }))
    .pipe(gulp.dest('dist'));
});

// 自动化 --> 自动编译  --> 自动革新浏览器（热更新） --> 自动翻开浏览器
gulp.task('watch', function() {
  livereload.listen();
  // 开启服务器
  connect.server({
    name: 'Dev App',
    root: ['build'],
    port: 3000,
    livereload: true  //热更新
  });
  // 翻开浏览器
  open('http://localhost:3000');
  
  // 看管指定文件，一旦文件发生变化，就实行背面的使命
  gulp.watch('src/less/*.less', gulp.series('less'));
  gulp.watch('src/js/*.js', gulp.series('js-dev'));
});

// 设置默许使命 --> 实行以上多个使命
gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); // 同步递次实行，同一时间只能实行一个使命  速度慢
gulp.task('js-prod', gulp.series('js-dev', 'uglify'));
// gulp.task('default', gulp.parallel('eslint', 'babel', 'browserify')); // 异步实行，同一时间实行多个使命   速度快
gulp.task('build', gulp.parallel('js-dev', 'less'));
// 临盆环境的指令: gulp prod
gulp.task('prod', gulp.parallel('js-prod', 'css', 'html'));
// 开辟环境的指令： gulp start
gulp.task('start', gulp.series('build', 'watch'));

上面包含了基本上一切gulp工程化所须要的包的运用方法和解释，喜好的朋侪愿望你珍藏！