gulp

gulp 特点：任务化、基于流，I/O

gulp 内存：

输入流： 本地文件 -> gulp 内存
输出流： gulp 内存 -> 本地

常用插件：

{
  "gulp-clean-css": "压缩css",
  "gulp-concat": "拼接css/js",
  "gulp-connect": "服务",
  "gulp-htmlmin": "压缩html",
  "gulp-less": "less转css",
  "gulp-livereload": "实时更新",
  "gulp-load-plugins": "插件管理",
  "gulp-rename": "重命名",
  "gulp-uglify": "压缩js"
}

// series 同步执行 parallel 异步
const { series, parallel, src, dest, watch } = require("gulp");
const $ = require("gulp-load-plugins")();
const fs = require("fs");

//  $.livereload 会和$.connect.reload() 冲突 二者用一个就好

function clean(cb) {
  fs.readdir("dist", async (err, files) => {
    if (err) {
      cb();
    } else {
      return src("dist", { read: false }).pipe($.clean()).unpipe();
    }
  });
}

function css() {
  return (
    src("src/less/**/*.less")
      .pipe($.less())
      .pipe($.concat("main.css"))
      .pipe(dest("dist/css"))
      .pipe($.cleanCss()) // 压缩
      .pipe($.rename({ suffix: ".min" }))
      .pipe(dest("dist/css"))
      // .pipe($.livereload());
      .pipe($.connect.reload())
  );
}

function javascript() {
  return (
    src("src/js/**/*.js") //操作的源文件
      .pipe($.concat("main.js")) //合并到临时文件
      .pipe(dest("dist/js")) //生成到目标文件夹
      .pipe($.uglify()) // 压缩
      .pipe($.rename({ suffix: ".min" }))
      .pipe(dest("dist/js"))
      // .pipe($.livereload());
      .pipe($.connect.reload())
  );
}

function html() {
  return (
    src("index.html")
      .pipe($.htmlmin({ collapseWhitespace: true }))
      .pipe(dest("dist/"))
      // .pipe($.livereload());
      .pipe($.connect.reload())
  );
}

// 监视文件变化，重新构建
function watchChange() {
  //   $.livereload.listen();
  watch(["src/js/**/*.js"], { events: ["change"] }, javascript);
  watch(["src/less/**/*.less"], { events: ["change"] }, css);
  watch(["index.html"], { events: ["change"] }, html);
}

function serve() {
  return new Promise((resolve, reject) => {
    $.connect.server({
      root: "dist/",
      livereload: true,
      port: 8888,
    });
    watchChange();
    resolve();
  });
}

exports.clean = series(clean);
exports.html = series(html);
exports.watch = series(watchChange);
exports.default = series(parallel(css, javascript), html, serve);