Remove generated CSS files after concatenating and minifying with Gulp

Question

I have some gulp tasks that are generating the files shown in the image:

What I'm trying to achieve, is to combine these 3 files into a single one and minify the result.

Here's a snippet of my 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);
});

Output from 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

I'm very new to Gulp, so there are a few things I don't understand pretty well such as why these tasks can't be combined into a single one. No need to mention my code isn't producing the desired result.

I'd appreciate some help on this. Thanks!

What is your gulp version? And what result/error are you getting? — Mark, Jan 14 '19 at 03:42
In your 'css' task you first call 'sass-min' and then 'css-deps' which itself calls 'sass-min' again. And 'clean-css' deletes the files in your publicPath + 'css/*.css' directory which appears to be where you just created them in the 'css-deps-min' task. You also have two versions: publicPath + '/css' and publicPath + 'css'. Only one of those is correct, without seeing your publicPath variable I cannot say which is wrong. — Mark, Jan 14 '19 at 03:50
docker@cli:/var/www$ gulp -v [04:55:17] CLI version 2.0.1 [04:55:17] Local version 3.9.1 docker@cli:/var/www$ — danielperaza, Jan 14 '19 at 04:55
var resourcesPath = 'resources/assets/'; var publicPath = 'public/'; var inputStylesPath = 'resources/assets/sass'; var outputStylesPath = 'public/css'; var tmpStylesPath = '/tmp'; var inputJSPath = 'resources/assets/js'; var outputJSPath = 'public/js'; — danielperaza, Jan 14 '19 at 04:56
The problem is that I'm unable to remove the generated css and leave the only one I want. That's what I'm trying to figure out. Other than that, node cli shows no error at all. — danielperaza, Jan 14 '19 at 04:58
Here's a link to the gulpfile as it is right now: https://www.dropbox.com/s/3uai4o58tit3prw/gulpfile.js?dl=0. — danielperaza, Jan 14 '19 at 05:27
And the output from gulp is: https://www.dropbox.com/s/zv4b771iqlba3o6/gulp_output.txt?dl=0 — danielperaza, Jan 14 '19 at 05:30

score 0 · Accepted Answer · answered Jan 19 '19 at 18:15

The problem with the gulpfile was that tasks weren't being executed in order despite using gulp-senquence. I found the answer in the gulp-sequence documentation: A return keyword was missing. See the examples here https://www.npmjs.com/package/run-sequence#usage.

Remove generated CSS files after concatenating and minifying with Gulp

1 Answers1