gulp-更改为 gulp-concat 不起作用

gulp-changed with gulp-concat not working

我只想编译已更改的 .less 文件以加快我的 debug/coding 工作流程。

这是我的 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 秒)。

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

假设您有一个输入文件 core/foo/bar.less,您通过 changed('dist') 进行管道传输。它的作用是查找输出文件 dist/foo/bar.less。如果输入文件比输出文件新,则通过。否则被过滤掉。

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

还有一个问题。每个输入文件都没有一个输出文件。你所有的 .less 文件都被编译成 one 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'));
});