Gulp 3 to Gulp 4: How to watch scss and minify/compile it into css?

Question

In Gulp 3, using the following code would put scss into css when changes would be detected. It would make new minified files from old .scss files and put them into the css folder.

//=======gulpfile.js=======
//dependencies
var gulp        = require('gulp');
var sass        = require('gulp-sass');
var minifyCCS   = require('gulp-clean-css');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var changed     = require('gulp-changed');

//Roots
var SCSS_SRC    = './public/scss/*.scss';
var SCSS_DEST   = './public/css';

//Compiling
gulp.task('compile_scss', function(){
    return gulp.src(SCSS_SRC)
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
});

//Detect changes in SCSS
gulp.task('watch_scss', function(){
    gulp.watch(SCSS_SRC, ['compile_scss']);
});

//Run
gulp.task('default', ['watch_scss']);

However, Gulp 4 completely changes the function handling and I have not yet found a decent example of how to simply watch scss and put it into minified css. I have read about gulp.series and gulp.parallel but I don't think any of these things are what I am looking for. The code above, used in Gulp 3, does no longer work in Gulp 4. Instead of running gulp watch_css, the cmd throws me an error like this:

assert.js:350 throw err; ^

AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\set-task.js:10:3) at Gulp.task (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\task.js:13:8) at Object. (D:\say-my-name-RG\saymyname\gulpfile.js:29:6) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18)

This is all on a localhost node server, using react. I have tried looking for a gulp.set function but I haven't found anything along those lines. Someone said that going back to Gulp 3 would be the easiest option but I kind of want to use the latest software possible.

Also running gulp compile_scss in the cmd, so without gulp.watch, gives me the same error as shown above.

Mark Mark · Accepted Answer · 2018-12-24T16:50:21

You do need to use gulp.series:

//Detect changes in SCSS
gulp.task('watch_scss', function(){
    gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});

//Run
gulp.task('default', gulp.series('watch_scss'));

and you have a typo in line:

var minifyCCS   = require('gulp-clean-css');

change to:

var minifyCSS   = require('gulp-clean-css');

Migrating to gulp4 is a good reference.

Gulp 3 to Gulp 4: How to watch scss and minify/compile it into css?

1 Answers