gulp-cache：如何将文件缓存用于 LESS 构建

Question

我们正在使用 gulp 将所有 LESS 文件编译到 Maven 项目的 target/ 中。仅此任务就需要约 51 秒，因此我们希望加快速度并跳过未更改的 LESS 文件。我们需要一个文件缓存，因为 gulp 是从 Maven 调用的，并且构建在 IDE 中运行，所以 gulp 进程不能留在内存中。

即使 /target 被 Clean & Build 删除，缓存的 CSS 文件最好也应该复制到 target/。

这是我的代码：

var cache = require('gulp-cache');
var fileCache = new cache.Cache({ cacheDirName: 'gulp-cache' });

gulp.task('less', function () {
    return gulp.src([webappPath + '/**/*.less'])
            .pipe(fileCache('less'))
            .pipe(sourcemaps.init())
            .pipe(less({
                paths: [path.join(__dirname, 'less', 'includes')],
                plugins: [cleancss],
                relativeUrls: true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest(target));
    ;
});

.pipe(fileCache('less')) 行出现错误：

TypeError: fileCache 不是一个函数。

（https://www.npmjs.com/package/gulp-cache 的文档）

Answer 1

(1) gulp-cache 插件需要包装你的 less 插件。这样，只有已更改的文件才会传递给less。

(2) 您不一定需要实例化您自己的cache.Cache 对象。如果您不这样做，gulp-cache 将为您创建一个。如果你想拥有多个缓存，你只需要自己做。在这种情况下，您可以使用fileCache 选项传递cache.Cache 对象。

gulp.task('less', function () {
  return gulp.src([webappPath + '/**/*.less'])
    .pipe(sourcemaps.init())
    .pipe(cache(less({
      paths: [path.join(__dirname, 'less', 'includes')],
      plugins: [cleancss],
      relativeUrls: true
    }), {
      fileCache: new cache.Cache({ cacheDirName: 'gulp-cache' })
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(target));
});