Gulp Isn't Executing Minify-CSS

Question

Here is what I have:

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');


// GULP WATCH
gulp.task('watch', function() {
   gulp.watch('assets/sass/*.sass', ['sass']);
});

// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('cleanCSS', function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('minify-css', function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('default', ['sass','watch','cleanCSS','minify-css']);

My problem:

When I initially run gulp it works perfectly. As I save my files, the only function that executes is sass, but my site files link to the minified CSS so I need each function to work otherwise I don't see my changes. This issue started once I added the task minify-css.

V2 Update

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');

// GULP WATCH
gulp.task('watch', function() {
    gulp.watch('assets/sass/*.sass', ['sass']);
});

// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('cleanCSS', function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('minify-css', ['cleanCSS'], function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('default', ['sass','watch','minify-css']);

peinearydevelopment · Accepted Answer · 2017-11-30T22:25:53.967

As far as I can tell you have three options.

Option 1 - least preferred but least amount of changes

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');


// GULP WATCH
gulp.task('watch', function() {
   gulp.watch('assets/sass/*.sass', ['sass', 'cleanCSS', 'minify-css']);
});

// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('cleanCSS', function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('minify-css', function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('default', ['sass','watch','cleanCSS','minify-css']);

While your default task is running all four tasks(sass, watch, cleanCSS and minify-css), when the watch task notices changes in one of your .sass files, it only reruns the sass task(not the default task which would run all four again). This is not preferred as I believe gulp runs these tasks in parallel and they aren't guaranteed to run in order or wait for one to finish before the next run.

Option 2 - better, but still not optimal

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');

// GULP WATCH
gulp.task('watch', function() {
    gulp.watch('assets/sass/*.sass', ['minify-css']);
});

// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('cleanCSS', ['sass'], function(){
  return gulp.src('assets/*.css')
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('minify-css', ['cleanCSS'], function() {
  return gulp.src('assets/css/style.css')
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('default', ['sass','watch',]);

This is much more declarative. Now running gulp will execute the default task which will fire off the sass and watch tasks. minify-css is dependent on cleanCSS, so gulp will try to run the cleanCSS task, but that is dependent on sass, so it will run that first, then cleanCSS, then minify-css. When watch notices a change it will rerun minify-css, but will see the dependency chain and run all of them again.

Option 3 - best gulp is different from grunt in that it uses streams so that it doesn't have to write to disk in between each task. Keeping the files in memory while manipulating them makes it operate faster. If all of these tasks need to run all of time, the best would be to combine them into one with something like the following.

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');


// GULP WATCH
gulp.task('watch', function() {
   gulp.watch('assets/sass/*.sass', ['sass']);
});

// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(cleanCSS())
    .pipe(concat('style.css'))
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('default', ['sass','watch']);

This will read the files in once and write them once. The default task will execute the sass task as will the watch task when it notices changes.

Hope this helps!

Thanks for breaking that down for me @peinearydevelopment. That makes sense, however it's still not working. The behaviour is the same. Sass is the only thing that executes. — tmcd, Nov 30 '17 at 21:27
I thought by running `gulp` it would run each item listed in the brackets, which are the default tasks. I'm new to gulp, can you please clarify? — tmcd, Nov 30 '17 at 21:34
Right, but in my code I have `minify-css` listed in my default task list. (Look at V2 Update above) — tmcd, Nov 30 '17 at 21:43
Completely rewrote the answer, hope it makes more sense now. — peinearydevelopment, Nov 30 '17 at 22:26
Oh wow! That works, and thank you for outlining the three options. I definitely would not have come up with option 3 on my own. So much cleaner! Still a little confused why option 2 wasn't working, even if it wasn't the best approach. Anyways, appreciate it! — tmcd, Dec 01 '17 at 03:20

Gulp Isn't Executing Minify-CSS

1 Answers1