Using Gulp to Minify and Auto Update a CSS File

Question

I have a Gulp task that minifies my CSS in one folder and then pipes it to another folder.

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");

gulp.task("minify-css", () => {
  return (
    gulp
      .src("./css/**/*.css")
      .pipe(cleanCSS())
      .pipe(gulp.dest("minified"))
  );
});

The command gulp minify-css works perfectly. I don't want to have to continually type that command in the terminal tho.

I want the code below to watch my CSS file and when it changes I want the minify-css task to run and update my minified file but it doesn't work:

gulp.task("default", function(evt) {
  gulp.watch("./css/**/*.css", function(evt) {
    gulp.task("minify-css");
  });
});

Any ideas on why this doesn't work? Thank you in advance!

Answer 1

The problem lies in the area where you are calling gulp.task('minify-css') inside the gulp.watch callback function. That code does not actually invoke the minify-css task, but rather spawns an anonymous task as pointed by you in your logs. Instead gulp.watch should invoke a function which internally performs the minify-css job.

The other issue is probably the syntax changes that happened in gulp-4. They are not many but can be confusing.

I've managed to fix the issue and it works. Here is the updated code for gulpfile.js below:

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");

function minifyCSS() {
  return (
    gulp
      .src("./css/*.css")
      .pipe(cleanCSS())
      .pipe(gulp.dest("minified"))
  );
}

gulp.task("minify-css", minifyCSS);

gulp.task("watch", () => {
  gulp.watch("./css/*.css", minifyCSS);
});

gulp.task('default', gulp.series('minify-css', 'watch'));

Hope this helps.