gulp-changed 与 gulp-concat 不工作

Question

我只想编译已更改的 .less 文件，以加快我的调试/编码工作流程。

这是我的 gulp 任务：

gulp.src('core/**/*.less')
  .pipe(changed('core'))
  .pipe(less().on('error', handleError))
  .pipe(autoprefixer('last 2 version'))
  .pipe(remember())
  .pipe(concat('main.min.css'))
  .pipe(gulp.dest('core'))
  .on('end', resolve)
  .on('error', reject);

我使用了gulp-changed，因为一开始它不起作用，我也尝试使用gulp-remember，但没有效果。手表好用，编译速度超快，但是一点效果都没有。

如果我删除 changed('core') 和 remember() 它可以工作，但速度较慢（大约 16 秒）。

Answer 1

gulp-changed 不适合您的用例，因为它旨在将输入文件与磁盘上的输出文件进行比较。

假设您有一个输入文件core/foo/bar.less，您可以通过changed('dist') 进行管道传输。这样做是为了寻找一个输出文件dist/foo/bar.less。如果输入文件比输出文件新，则通过。否则会被过滤掉。

这意味着使用changed('core') 不可能工作。它将输入文件core/foo/bar.less 与输出文件core/foo/bar.less 进行比较。 但它们是同一个文件。这意味着输入文件永远不会比输出文件更新并且永远不会被传递。

还有一个问题。每个输入文件都没有一个输出文件。您所有的.less 文件都被编译成一个 main.min.css 文件。虽然您可以使用 custom comparator 来完成这项工作，但它并不是开箱即用的。

你真正想要的是gulp-cached。它不是将每个输入文件与磁盘上的输出文件进行比较，而是将每个输入文件与已缓存在内存中的同一文件的先前版本进行比较。

var cached = require('gulp-cached');

gulp.task('css', function() {
  return gulp.src('core/**/*.less')
    .pipe(cached('less'))
    .pipe(less())
    .pipe(autoprefixer('last 2 version'))
    .pipe(remember('less'))
    .pipe(concat('main.min.css'))
    .pipe(gulp.dest('core'));
});