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

即使没有单个CSS文件发生更改，

也会出现在gulp的日志输出中。 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结合使用。

有人说，如果您想从[{1}}调用min:css来加快gulp.watch()任务，可以按照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("."));
});

gulp-changed不会过滤掉未更改的文件

1 个答案: