Modify gulpfile.js (gulp 4.0)

Question

This is the old configuration file.

Current gulp version is 4.0
How to modify this configuration file through gulp.series(), gulp.parallel() ?

I see all the translated tutorials, don't very understanding.
How to modify this configuration file (gulp 4.0 > gulp watch, gulp.series, gulp.parallel) ?

Thanks

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    autoPrefixer = require("gulp-autoprefixer"),
    minifyCss = require("gulp-clean-css"),
    rename = require("gulp-rename"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    plumber = require("gulp-plumber"),
    util = require("gulp-util"),
    browserSync = require("browser-sync").create(),
    reload = browserSync.reload;
var srcs = {
    "html": ["./**/*.html"],
    "css": ["./assets/css/**/*.css"],
    "sass": ["./assets/sass/**/*.scss"],
    "js": ["./assets/js/*.js"],
};

gulp.task("default", ["browser-sync"]);

gulp.task("sass", function (done) {
    return gulp.src("./assets/sass/sys.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoPrefixer({
            browsers: ["> 5%", "last 2 versions", "not ie <=8"],
            cascade: true,
            remove: true
        }))
        .pipe(rename({
            basename: "sys"
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(reload({
            stream: true
        }))
        .pipe(minifyCss())
        .pipe(rename({
            suffix: ".m"
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(reload({
            stream: true
        }));
    util.log(util.colors.yellow("website styles compied and minified"));
});

gulp.task("js", function (done) {
    return gulp.src("./assets/js/sys.js")
        .pipe(reload({
            stream: true
        }));
});

gulp.task("browser-sync", ["sass", "js"], function () {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        browser: ["google chrome"]
    });
    gulp.watch(srcs.html).on("change", reload);
    gulp.watch(srcs.sass, ["sass"]);
    gulp.watch(srcs.js, ["js"]);
});

Nikola Kirincic · Answer 1 · 2019-01-02T10:46:13.547

As of Gulp 4, there is no need to register tasks through task() method. Gulp API will still support this approach, but usage of exporting is now primary approach to register tasks. ( see: https://gulpjs.com/docs/en/getting-started/creating-tasks )

Along with this new approach, all stream methods (src, dest, series, parallel, watch) can be defined through ES6 destructuring assignment feature as:

const {src, dest, watch, series, parallel} = require('gulp');

Also, cool feature in Gulp 4 regarding series and parallel is limitless nesting, so using this approach, you can avoid duplicating tasks. (see: https://gulpjs.com/docs/en/api/series and https://gulpjs.com/docs/en/api/parallel)

So your gulpfile.js modified according to Gulp 4 features would look like this:

const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment

    var sass = require("gulp-sass"),
        autoPrefixer = require("gulp-autoprefixer"),
        minifyCss = require("gulp-clean-css"),
        rename = require("gulp-rename"),
        concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
        uglify = require("gulp-uglify"),//you don't use this anywhere.  Avoid importing objects to reduce memory buffer overload
        plumber = require("gulp-plumber"),
        util = require("gulp-util"),
        browserSync = require("browser-sync").create(),
        reload = browserSync.reload;

    var srcs = { 
        html: ["./**/*.html"],
        css: ["./assets/css/**/*.css"],
        sass: ["./assets/sass/**/*.scss"],
        js: ["./assets/js/*.js"],
    };



    function sass() {
        return src("./assets/sass/sys.scss")
            .pipe(plumber())
            .pipe(sass())
            .pipe(autoPrefixer({
                browsers: ["> 5%", "last 2 versions", "not ie <=8"],
                cascade: true,
                remove: true
            }))
            .pipe(rename({
                basename: "sys"
            }))
            .pipe(dest("./assets/css"))
            .pipe(reload({
                stream: true
            }))
            .pipe(minifyCss())
            .pipe(rename({
                suffix: ".m"
            }))
            .pipe(dest("./assets/css"))
            .pipe(reload({
                stream: true
            }));
        util.log(util.colors.yellow("website styles compied and minified"));
    }

    function js(){
        return src("./assets/js/sys.js")
            .pipe(reload({
                stream: true
            })); //not sure if you intentionally did not put dest() stream method
    }

    function browser_sync(cb) {
        browserSync.init({
            server: {
                baseDir: "./"
            },
            browser: ["google chrome"]
        });
        const watcher = watch(srcs.html);

        watcher.on('change',  reload);

        watcher.on("change", reload);
        watch(srcs.sass, series(sass));
        watch(srcs.js,  series(js));
        cb();
    }

    //this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
    exports.default = series(parallel(sass, js), browser_sync);

Mark · Answer 2 · 2019-01-02T16:58:20.617

     // don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {        
    // all your stuff unchanged here
});

    // don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
    return gulp.src("./assets/js/sys.js")
        .pipe(reload({
            stream: true
        }));
});

// gulp.task('taskName', only one other parameter with the function call part of gulp.series

gulp.task("browser-sync", gulp.series("sass", "js", function () {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        browser: ["google chrome"]
    });
    gulp.watch(srcs.html).on("change", reload);

    // don't need gulp.series below if only calling a single task
    // but if you wanted it:  gulp.watch(srcs.sass, gulp.series("sass"));
    // It does seem that sometimes the gulp.series is needed even though the docs 
    //     specifically say you don't when calling only a single task

    gulp.watch(srcs.sass, "sass");
    gulp.watch(srcs.js, "js");
}));

 // move below to the bottom, if using gulp.task cannot call a task before it has been registered, 
 //   i.e., gulp.task("browser-sync"........

 gulp.task("default", "browser-sync");

See a good migration to gulp4 article.

There are many more gulp4 benefits if you completely change your tasks to functions as mentioned in the article or the gulpJS docs, exporting etc. But what is above should get you towards working gulp4 code.

Modify gulpfile.js (gulp 4.0)

2 Answers2