Gulp-minify-css does not produce output files

Question

I have set up a very simple gulpfile.js There are only two task - 'sass' and 'minify-js'. These two tasks are fired by the task 'watch' when a change is detected. It all seems to be working well: Gulp is listening for changes, *.scss files are compiled into CSS, the console generates output as expected, without any errors. However, the CSS files do not get minified there are no output files from the 'minify-css' task whatsoever.

Why is 'minify-css' not working? What am I missing here?

This is my gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');

gulp.task('sass', function() {
    gulp.src('plugins/SoSensational/styles/sass/*.scss')
            .pipe(sass())
            .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('minify-css', function() {
    gulp.src('plugins/SoSensational/styles/dest/*.css')
            .pipe(minifyCSS())
            .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('watch', function() {
    gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']);
});

Answer 1

Sounds like a race condition. Sass and MinifyCSS are executed in parallel, might be that your Sass task isn't done when you're already running MinifyCSS. Sass should be a dependency, so you have two options:

1. Make Sass a dependency from minifycss:

   gulp.task('minify-css', ['sass'], function() {
       return gulp.src('plugins/SoSensational/styles/dest/*.css')
           .pipe(minifyCSS())
           .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
   });
   
   gulp.task('watch', function() {
        gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']);
   });
   

2. Have one task that does both!

   gulp.task('sass', function() {
        return gulp.src('plugins/SoSensational/styles/sass/*.scss')
            .pipe(sass())
            .pipe(minifyCSS())
            .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
   });
   

The latter one is actually the preferred version. You save yourself a lot of time if you don't have an intermediate result

Btw: Don't forget the return statements