gulp-changed 没有过滤掉未更改的文件

Question

我正在尝试使用gulp-changed 来防止在未更改的文件上发生耗时的任务。我的 gulpfile.js 设置如下：

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(changed("."))
        .pipe(concat(paths.concatCssDest))
        .pipe(autoprefixer({ browsers: ['> 5%'] }))  //support browsers with >5% market share
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

但是每次我看到一切都在运行：

[11:15:02] Starting 'min:js'...
[11:15:02] Starting 'min:css'...
[11:15:02] Finished 'min:css' after 79 ms
Process terminated with code 0.
[11:15:02] Finished 'min:js' after 121 ms
[11:15:02] Starting 'min'...
[11:15:02] Finished 'min' after 12 μs

gulp-changed 有什么理由不过滤这些未更改的文件？

Answer 1

首先您似乎误解了 gulp-changed 的实际作用。 gulp-changed 无法阻止任务运行。这意味着这两行：

[11:15:02] Starting 'min:css'...
[11:15:02] Finished 'min:css' after 79 ms

将出现在 gulp 的日志输出中即使没有单个 CSS 文件发生更改。 gulp-changed 只是从流中删除未更改的文件，以便它们不会到达以后的 pipe() 阶段。文件仍在处理直到它们到达changed()。

（巧合的是，我昨天刚刚写了一个答案，该答案也涉及gulp-changed，并将其操作模式与gulp.watch() 和gulp-watch 进行对比。Might be of interest too。）

其次，gulp-changed 如何知道文件是否已更改？它将源文件与目标文件进行比较。如果目标文件比源文件旧，则源文件必须已更改。

为此，gulp-changed 必须能够从源文件映射到目标文件。但是，您有多个源文件和一个目标文件（您的连接文件）。这意味着您必须提供自定义 hasChanged handler 才能从源文件映射到目标文件。

第三，即使你做了所有你的任务仍然不可能按照你想要的方式工作。由于gulp-changed 只允许那些已更改的文件通过，因此只有这些文件最终会出现在您的连接输出文件中。

假设您要将foo.css 和bar.css 连接成all.css。这第一次可以正常工作。但是，如果您随后更改 bar.css，只有 bar.css 会以 all.css 结束。

由于您始终需要所有 CSS 文件作为输入，您不能将gulp-changed 与gulp-concat 结合使用。

话虽如此，如果您想在从gulp.watch() 调用时加快您的min:css 任务，您可以关注official Gulp.js incremental rebuilding recipe：

gulp.task("min:css", function () {
  return gulp.src([paths.css, "!" + paths.minCss])
    .pipe(cached('cssCache'))
    .pipe(autoprefixer({ browsers: ['> 5%'] }))
    .pipe(cssmin())
    .pipe(remember('cssCache'))
    .pipe(concat(paths.concatCssDest))
    .pipe(gulp.dest("."));
});