Gulp 4.0: gulp-запомнить или 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 секунд, затем, когда бы я ни делал изменение, он может видеть, в каком файле я внес это изменение, и он начинает компилироваться, но выходной файл не имеет изменения внутри.

Я думаю, что я не получаю что-то, когда дело доходит до gulp-cached и gulp-запомнить. Но в конце файла вы можете увидеть функцию, которая должна очищать кеш после внесения изменений.

Можете ли вы взглянуть на мой код? Может быть, у вас будет совет.

Ура!

### РЕДАКТИРОВАТЬ 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 секунд): 1-я компиляция: ~3,5 с, 2-я или позже: ~2,4 с

Вам не нужно констатировать или упорядочивать здесь, так как весь порядок вещей происходит, когда вы импортируете 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", если вы хотите определить, когда файл удаляется. since просто проверяет даты, которые быстрее по сравнению с cached который читает и сравнивает контент. Но cached является более надежным (например, когда вы удалили, а затем вернули файл с помощью инструментов IDE since не будет работать, так как файл будет возвращен снова с его старой датой). Также проверьте пути - я, возможно, испортил их.