gulpfile.js - version 3 to 4 migration

Question

Years back I setup vs code to somewhat replicate the current methods I was using to design my sites (using standalone apps). I decided at the time I would just stick to what I was using. Since those apps are no longer maintained I am coming across compiling issues now - the time has come to make the jump.

I am having trouble with my gulpfile.js which is from back when I originally tried this all out. I saved it in case I needed to return to using vs code. Problem is apparently this format no longer works because gulp has updated. All of this is basically foreign to me right now and while I understand what things are doing I don't understand enough to modify this to the current method for gulp 4^.

Any chance someone can help me out with this one? I've looked at the guides about series and parallel and so on. I guess it's easier for me to understand by looking at a working example.

my old gulpfile.js

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

//processes the scss files in this folder
//minimizes them
gulp.task('sass', function () {
    return gulp.src('_config/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS())
        .pipe(gulp.dest('assets/css'));
});

//minifies all js files in this folder
gulp.task('js', function () {
    return gulp.src('_config/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'));
});

//minifies all js files in this folder
gulp.task('scripts', function () {
    return gulp.src('_config/scripts/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/scripts'));
});

//creates 'watchers' that run tasks on specific activities
gulp.task('watch', function () {
    gulp.watch('_config/scss/**/*.scss', ['sass']);
    gulp.watch('_config/js/**/*.js', ['js']);
    gulp.watch('_config/scripts/**/*.js', ['scripts']);
    gulp.watch('_config/img/**/*', ['img']);
});

//this is the default task that runs everything
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);

Answer 1

You are not that far from where you need to be. Change this code:

gulp.task('watch', function () {
    gulp.watch('_config/scss/**/*.scss', ['sass']);
    gulp.watch('_config/js/**/*.js', ['js']);
    gulp.watch('_config/scripts/**/*.js', ['scripts']);
    gulp.watch('_config/img/**/*', ['img']);
});

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

to

gulp.task('watch', function () {
    gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('_config/js/**/*.js', gulp.series('js'));
    gulp.watch('_config/scripts/**/*.js', gulp.series('scripts'));
    gulp.watch('_config/img/**/*', gulp.series('img'));
});


gulp.task('default', gulp.series('sass', 'js', 'scripts', 'watch'));

gulp.task now has this signature: gulp.task([taskName], taskFunction)

Before gulp v3 used an array of tasks as the second argument. gulp v4 uses a function, like gulp.series() or gulp.parallel(), as the second argument. And gulp.series() takes a list of tasks as its arguments. Since you used the gulp.task() method to create your tasks, the task names in series should appear as strings, like 'sass', 'js', etc.

---

Note: The preferred way to create tasks in v4 is as functions like:

function scripts() {
    return gulp.src('_config/scripts/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/scripts'));
});

Then you would use those function names in series as gulp.series(scripts, js) - not as strings. You should look into using this form of tasks.

---

gulp.watch() signature: gulp.watch(globs, [options], [task])

The [task] can be a single task name, like your 'sass' or a composed task, which just means one generated using series or parallel.

In your case, you are running only one task in each watch statement, so

gulp.watch('_config/scss/**/*.scss', 'sass');

should suffice. I showed them as composed tasks like:

gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));

in case in the future you want to run more than one task upon a file change. In which case you could use something like:

gulp.watch('_config/scss/**/*.scss', gulp.series('sass', 'serve'));

for example.

---

Finally switch out gulp-uglify for gulp-terser. gulp-terser will handle es6 syntax that gulp-uglify cannot. gulp-terser