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插件以解析路径。使用＆＃39;取消关联＆＃39;如果要检测文件何时被删除，则为event。 since只检查与读取和比较内容的cached相比更快的日期。但是cached更可靠（例如，当您删除然后使用IDE工具返回文件时since将无效，因为文件将以旧日期再次返回）。还检查路径 - 我可能搞砸了它们。

Gulp 4.0：gulp-remember或gulp-cache阻止sass正确编译（Incremental build）

2 个答案: