Gulp 4.0：gulp-remember 或 gulp-cache 阻止 sass 正确编译（增量构建）

Question

昨天我将 Gulp 升级到 4.0，以便在为我的项目编译样式时获得一些速度（它们变大了，现在在我的 Mac Pro 2016 上我需要等待 19 秒）

经过一番挖掘，我决定将 gulp-cached 和 gulp-remember 添加到我的构建中。

这是我当前的 gulpfile.js 样式：

var gulp  = require('gulp'),
sass = require('gulp-sass'),
cached = require('gulp-cached'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
remember = require('gulp-remember'),
gs = gulp.series,
concat = require('gulp-concat'),
gp = gulp.parallel;

gulp.task('compile:styles', () => {
return gulp.src([

    // Grab your custom scripts
    './assets/scss/**/*.scss'

])
    .pipe(sourcemaps.init()) // Start Sourcemaps
    .pipe(cached('sass'))
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(remember('sass'))
    .pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
    .pipe(gulp.dest('./assets/css/'));
});

gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('styles'))
    .on('change', function (event) {
        console.log("event happened:"+JSON.stringify(event));
        if (event.type === 'deleted') {
            //delete from gulp-remember cache
            remember.forget('sass', event.path);
            //delete from gulp-cached cache
            delete cache.caches['sass'][event.path];
        }
    });
 });

gulp.task('watch', gp(
'watch:styles'
));

我的问题是我的构建在第一次编译时运行良好，大约需要 3 秒，之后在我进行更改的地方，它可以看到我在哪个文件中进行了更改，并且它开始编译，但是输出文件里面没有变化。

当谈到 gulp-cached 和 gulp-remeber 时，我想我没有得到什么。但在文件末尾，您可以看到一个函数，一旦发生更改，该函数就会清除缓存。

你能看看我的代码吗？也许你会有一些建议。

干杯！

### 编辑 26.08

我在寻找解决方案时遇到了以下帖子： http://blog.reactandbethankful.com/posts/2015/05/01/building-with-gulp-4-part-4-incremental-builds/

我用下面的代码进行了相应的处理（但效果和上面的例子一样）：

// Grab our gulp packages
var gulp  = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
gs = gulp.series,
gp = gulp.parallel,
cache  = require('gulp-memory-cache');

gulp.task('compile:styles', () => {
return gulp.src('./assets/scss/**/*.scss', {since: cache.lastMtime('sass')})
    .pipe(sourcemaps.init()) // Start Sourcemaps
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cache('sass'))
    .pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
    .pipe(gulp.dest('./assets/css/'));
});

gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('compile:styles'))
    .on('change', cache.update('sass'));
});

gulp.task('build', gs(
'compile:styles',
'watch:styles'
));

Answer 1

我在这里创建了一个完整的 gulpfile.js： https://gist.github.com/MkBeeCtrl/5a6a0900dba1c5d42dc7b6da211b3e95

包含 js 文件编译。

// Grab our gulp packages
var gulp  = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
gs = gulp.series,
gp = gulp.parallel,
cached  = require('gulp-cached'),
dependents = require('gulp-dependents');

gulp.task('compile:styles', () => {
return gulp.src('./assets/scss/**/*.scss')
    .pipe(cached('sass'))
    .pipe(dependents())
    .pipe(sourcemaps.init()) // Start Sourcemaps
    .pipe(sass())
    .pipe(autoprefixer({browsers: ['last 2 versions']}))
    .pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
    .pipe(gulp.dest('./assets/css/'));
});

gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('compile:styles'))
    .on('change', function (event) {
        console.log("event happened:"+JSON.stringify(event));
        if (event.type === 'deleted') {
            //delete from gulp-remember cache
            //emember.forget('sass', event.path);
            //delete from gulp-cached cache
            delete cache.caches['sass'][event.path];
        }
    });
});

gulp.task('build', gs(
'compile:styles',
'watch:styles'
));

上面的解决方案按我想要的方式工作，所以如果你想从多个导入的文件中生成单独的 CSS 文件，你可以使用它。这不是一个快速的解决方案，但我在重新编译时设法节省了大约 1 秒（已经节省了大约 15 秒，当我开始这个主题时，构建持续了 19 秒）： 第一次编译：~3.5s 第二次或更晚：~2.4s

您不需要在此处连接或订购，因为当您将 scss 文件导入主文件时会发生整个订购。

Answer 2

试试这个。我想它可能会做你想要实现的目标：

'use strict';
const gulp = require('gulp');
const path = require('path');
const cached = require('gulp-cached');
const remember = require('gulp-remember');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');

gulp.task('styles:compile', function() {
    return gulp.src('assets/scss/**/*.scss', {since: gulp.lastrun('styles:compile')})
        .pipe(sourcemaps.init()) 
        //.pipe(cached('sass')) - a smarter but heavier alternative to since
        .pipe(remember('sass'))
        .pipe(concat('all.sass'))
        .pipe(sass())
        .pipe(autoprefixer({ browsers: ['last 2 versions'] }))
        .pipe(sourcemaps.write()) 
        .pipe(gulp.dest('assets/css/'));
});

gulp.task('styles:watch', function() {
    var watcher = gulp.watch('assets/scss/**/*.scss', gulp.series('compile:styles'));
    watcher.on('unlink', function(filepath) {
        remember.forget('sass', path.resolve(filepath));
        //delete cached.caches.sass[path.resolve(filepath)];
    });
});

gulp.task('default', gulp.series('styles:compile', 'styles:watch'));

安装path 插件来解析路径。如果您想检测文件何时被删除，请使用“取消链接”事件。 since 只检查日期，与读取和比较内容的cached 相比，它更快。但是cached 更可靠（例如，当您删除然后使用IDE 工具返回文件时，since 将不起作用，因为文件将以其旧日期再次返回）。还要检查路径——我可能把它们弄乱了。