Удалите сгенерированные CSS-файлы после объединения и свертывания с Gulp

Question

У меня есть несколько задач gulp, которые генерируют файлы, показанные на изображении:

То, чего я пытаюсь добиться, - это объединить эти 3 файла в один и минимизировать результат.

Вот фрагмент моего gulpfile:

gulp.task('clean-css', function (done) {
    gulp
        .src(publicPath + 'css/*.css')
        .pipe(clean())
        .on('error', log);
    done();
});

gulp.task('css-deps', ['sass-min'], function(done){
    gulp.src(resourcesPath + 'css/*.css')
        .pipe(concat('deps.css'))
        .pipe(gulp.dest(publicPath + '/css'))
        .on('error', log);
    done();
});

gulp.task('css-deps-min', function(done){

    gulp.src(publicPath + 'css/*.css')
        .pipe(concat('styles.min.css'))
        .pipe(cleanCss())
        .pipe(filesize())
        .pipe(gulp.dest(publicPath + 'css'))
        .on('error', log)
    ;

    done();
});

gulp.task('css', function(done) {
    sequence('sass-min', 'css-deps', 'css-deps-min', 'clean-css', done);
});

Выход из Gulp:

docker@cli:/var/www$ gulp clean && gulp css 
[05:25:01] Using gulpfile /var/www/gulpfile.js
[05:25:01] Starting 'clean'...
[05:25:01] Finished 'clean' after 6.61 ms
[05:25:03] Using gulpfile /var/www/gulpfile.js
[05:25:03] Starting 'css'...
[05:25:03] Starting 'sass-min'...
[05:25:03] Finished 'sass-min' after 7.36 ms
[05:25:03] Starting 'css-deps'...
[05:25:03] Finished 'css-deps' after 1.35 ms
[05:25:03] Starting 'css-deps-min'...
[05:25:03] Finished 'css-deps-min' after 1.05 ms
[05:25:03] Starting 'clean-css'...
[05:25:03] Finished 'clean-css' after 547 μs
[05:25:03] Finished 'css' after 14 ms
[05:25:04] Size deps.css : 4.96 kB
[05:25:04] Size app.css : 486 B
[05:25:04] Size react-components.css : 0 B
[05:25:04] Size app.css : 486 B
[05:25:04] Size react-components.css : 0 B

Я очень новичок в Gulp, поэтому есть несколько вещей, которые я не очень хорошо понимаю, например, почему эти задачи нельзя объединить в одну. Нет необходимости упоминать, что мой код не дает желаемого результата.

Буду признателен за помощь. Спасибо!

Answer 1

Проблема с gulpfile заключалась в том, что задачи не выполнялись по порядку, несмотря на использование gulp-senquence. Я нашел ответ в документации по gulp-sequence: отсутствует ключевое слово return. Смотрите примеры здесь https://www.npmjs.com/package/run-sequence#usage.

Answer 2

Не уверен, что это заслуживает ответа "ответ", но мне все равно нужно набрать 50 повторений, чтобы оставить комментарий lol

В любом случае, вы можете проверить это обсуждение , чтобы узнать, сможете ли вы упростить и выполнить свои задачи gulp соответствующим образом.

По сути, вы сначала скомпилируете sass, затем запустите задачу минификации и, наконец, объедините свои файлы.

Примерно так: (при условии, что у вас есть правильная функция минификации в sass-min)

// This kicks everything off in one go.
gulp.task('css-task', ['sass-min'], function(done){
    gulp.src(resourcesPath + 'css/*.css')
        .pipe(clean())
        .pipe(cleanCss())
        .pipe(filesize())
        .pipe(concat('styles.min.css'))
        .pipe(gulp.dest(publicPath + '/css'))
        .on('error', log);
    done();
});

gulp.task('css', function(done) {
    sequence('css-task', done);
});