gulp4 配置那些事情

gulp-autoprefixer 配置

在 package.json 中添加对应浏览器的列表

  "browserslist": [
    "last 6 version",
    "> 1%",
    "IE 8"
  ],

gulp-less-changed 只有当 less 文件发生修改的时候才将流往下传递

使用 gulp-less-changed 出现了问题 使用 gulp-changed 替代配置相关参数即可

const gulp = require("gulp");
const lessChanged = require("gulp-less-changed");
const less = require("gulp-less");

gulp.task("default", () => {
    return gulp
        .src("src/*.less")
        .pipe(lessChanged())
        .pipe(less())
        .pipe(gulp.dest("src"));
});

gulp-changed 的使用：只编译改动过的 less 文件

使用的时候发现如果是单独的 css，js 文件的改变，能够被检测到，但是如果是 less 样式编译成 css 样式，因为最后的扩展名不同，所以每次都会传递所有的 less 文件。通过仔细阅读官方文档，发现如果编译前后文件名后缀如果发生改变的话，需要单独配置的啊。。。于是添加相关配置就完美解决

.pipe($.changed(folder.dist.css, { extension: '.css' }))

gulp-html-beautify 格式化 html 文件

var htmlbeautify = require('gulp-html-beautify');

gulp.task('htmlbeautify', function() {
  var options = {
    {indentSize: 2}
  };
  gulp.src('./src/*.html')
    .pipe(htmlbeautify(options))
    .pipe(gulp.dest('./public/'))
});

gulp-rev-append-all 添加版本号不起作用

使用该模块的时候，该模块的位置必须在压缩html之前。如果压缩了html，则不会生效！

gulp 读取多个文件输出到当前目录(gulp 输出到不同目录)

使用一个回调函数获取对应的dest目录位置即可

   .pipe(gulp.dest(function(file){return file.base;}));

受此启发，可以输出到一个固定目录下的不同目录，使用replace函数替换对应的目录位置即可

   .pipe(dest(function (file) { return file.base.replace('src', 'dist');}))

其他

* (一个星号)，匹配一级(单层)文件。** (两个星号)，匹配任意数量的字符(文件)，多个(两层以上嵌套)或零个匹配

series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。
series()：使任务（task）按顺序执行。
parallel()：以最大并发来运行的任务（tasks）。

series()：任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。
parallel()：一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。