0

我正在尝试使用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没有过滤这些未更改的文件？

4

1 回答 1

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。可能也很有趣。）

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

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

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

假设您要连接foo.css并bar.css进入all.css. 这第一次可以正常工作。但如果你再改变bar.css，只会 bar.css落得下场all.css。

由于您始终需要所有 CSS 文件作为输入，因此不能gulp-changed与gulp-concat.

话虽min:css如此，如果您想在调用任务时加快任务速度，gulp.watch()可以遵循官方 Gulp.js 增量重建配方：

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("."));
});
于 2016-03-23T18:43:17.060 回答