Gulp 4.0: gulp remember或gulp-cache阻止sass正确编译(增量构建)

Question

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

经过一番挖掘之后，我决定在我的构建中添加gulp-cached和gulp记住。

这是我当前的样式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秒，之后无论我在哪里做更改，它都会看到我在哪个文件中进行了更改，并开始编译，但输出文件中没有这些更改。

当涉及到吞噬缓存和吞噬记忆时，我想我没有得到一些东西。但在文件的末尾，您可以看到一个函数，该函数应该在进行更改后清除缓存。

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

干杯!

编辑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插件以解析路径。如果要检测文件何时被删除，请使用“unlink”事件。与读取和比较内容的cached相比，since只检查日期，速度更快。但cached更可靠(例如，当您使用集成开发环境工具删除文件，然后将其返回时，since将不起作用，因为该文件将以其旧日期再次返回)。还要检查路径--我可能把它们弄乱了。