Converting code to Gulp 4.0

JavaScript
1

Hey,
I’ve been using this tutorial as a guideline for a few projects but since Gulp has upgraded to 4.0 I get an error because the tasks aren’t formulated right.
I tried changing these to the new format but still get the error “Error: watching .src/Assets/scss/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)”
Is anyone familiar with Gulp who could help me out?

Here’s the complete debug log:

d:\Projects\Resume\website>gulp
[14:45:00] Using gulpfile d:\Projects\Resume\website\gulpfile.js
[14:45:00] Starting 'default'...
[14:45:00] Starting 'watch_scss'...
[14:45:00] Starting '<anonymous>'...
[14:45:00] '<anonymous>' errored after 1.06 ms
[14:45:00] Error: watching .src/Assets/scss/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (d:\Projects\Resume\website\node_modules\gulp\index.js:28:11)
    at d:\Projects\Resume\website\gulpfile.js:27:8
    at bound (domain.js:396:14)
    at runBound (domain.js:409:12)
    at asyncRunner (d:\Projects\Resume\website\node_modules\async-done\index.js:
55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)
[14:45:00] 'watch_scss' errored after 3.29 ms
[14:45:00] 'default' errored after 5.9 ms

The script gulpfile.js:

'use strict';

//depemdemcies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');

//SCSS/CSS
var SCSS_SRC = '.src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';

//Compile SCSS
gulp.task('compile_scss', gulp.parallel(function(){
  gulp.src(SCSS_SRC)
  .pipe(sass().on('error', sass.logError))
  .pipe(minifyCSS())
  .pipe(rename({ suffix: '.min' }))
  .pipe(changed(SCSS_DEST))
  .pipe(gulp.dest(SCSS_DEST));
}));

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

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

And a screenshot of the project folder

Gulp
Gulp274×583 14.2 KB

2

In gulp 3.x you would normally pass the name of a task to gulp.watch().
In gulp 4.x You have to pass a function. So you pass it like so: gulp.series()

Although this is simpler it has worked for me in gulp 4.x:

//Styles tasks
gulp.task('sass', function(){
    return gulp.src('source-files')
        .pipe(sass()) // Using gulp-sass
        .pipe(gulp.dest('destination'))
});

gulp.task('sass', function(){
    return gulp.src('src/Assets/scss/**/*.scss') // Gets all files ending with .scss in /scss and children dirs
        .pipe(sass()) // Converts Sass to CSS with gulp-sass
        .pipe(gulp.dest('css'))
});


//Gulp Watch syntax has changed from 3.x in 4.x
gulp.task('watch', function() {
    gulp.watch('src/Assets/scss/**/*.scss', gulp.series('sass'));
});