Re-Write Gulp

In this article we are going to rewrite the gulp file. As we can see from below screenshot gulp task error loading with version “3.9.1”, we need to rewrite gulp task based on gulp latest version. Lets get started.

Let’s update and re-install gulp.

Update Gulp:

“gulp”: “4.0.2”

In latest version of gulp, major addition for running multiple task:

gulp.series()
gulp.parallel()

Below is the re-written task based on existing source:

Series()

Old Version: 3.9.1:

gulp.task("copy-all", ["copy-lib-js"]);

Latest Version: 4.0.2: gulp.series()

gulp.task("copy-all", gulp.series("copy-lib-js"));

Paralell:

Old Version: 3.9.1:

gulp.task("build-all", ["min-js", "copy-html"]);

latest Version: 4.0.2: gulp.parallel()

gulp.task("build-all", gulp.parallel("min-js", "copy-html"));

Now after running the task got another error, as we can see from below screenshot.

We need to end the task by callback function done().

Callback Function:

Old Version: 3.9.1:

gulp.task('copy-lib-js', function () {
    gulp.src('./node_modules/core-js/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'core-js'));

    gulp.src('./node_modules//**/*.js')
        .pipe(gulp.dest(root_path.package_lib + ''));

    gulp.src('./node_modules/zone.js/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'zone.js'));

    gulp.src('./node_modules/systemjs/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'systemjs'));

    gulp.src('./node_modules/reflect-metadata/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'reflect-metadata'));

    gulp.src('./node_modules/rxjs/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'rxjs'));
});

Latest Version: 4.0.2:

gulp.task('copy-lib-js', function (done) {
    //Task body
    done();
});

As we can see the task is running from below screenshot.

Finally:

/// 

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    rename = require("gulp-rename");

var root_path = {
    webroot: "./wwwroot/"
};

//library source
root_path.nmSrc = "./node_modules/";

//library destination
root_path.package_lib = root_path.webroot + "lib/";

gulp.task('copy-lib-js', function (done) {
    gulp.src('./node_modules/core-js/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'core-js'));

    gulp.src('./node_modules//**/*.js')
        .pipe(gulp.dest(root_path.package_lib + ''));

    gulp.src('./node_modules/zone.js/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'zone.js'));

    gulp.src('./node_modules/systemjs/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'systemjs'));

    gulp.src('./node_modules/reflect-metadata/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'reflect-metadata'));

    gulp.src('./node_modules/rxjs/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'rxjs'));

    gulp.src('./node_modules/angular-highcharts/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'angular-highcharts'));

    gulp.src('./node_modules/highcharts/**.js')
        .pipe(gulp.dest(root_path.package_lib + 'highcharts'));

    gulp.src('./node_modules/angular2-in-memory-web-api/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'angular2-in-memory-web-api'));

    gulp.src('./node_modules/jsrender/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'jsrender'));

    gulp.src('./node_modules/syncfusion-javascript/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'syncfusion-javascript'));

    gulp.src('./node_modules/ej-angular2/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'ej-angular2'));

    gulp.src('./node_modules/jquery/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'jquery'));

    gulp.src('./node_modules/jquery-validation/**/*.js')
        .pipe(gulp.dest(root_path.package_lib + 'jquery-validation'));

    done();
});

gulp.task("copy-all", gulp.series("copy-lib-js"));
//gulp.task("copy-all", ["copy-lib-js"]);
//Copy End

gulp.task('min-js', function (done) {
    gulp.src(['./clientapp/**/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest(root_path.webroot + 'app'));

    done();
});

gulp.task('copy-html', function (done) {
    gulp.src('clientapp/**/*.html')
        .pipe(gulp.dest(root_path.webroot + 'app'));

    done();
});

gulp.task("build-all", gulp.parallel("min-js", "copy-html"));
//gulp.task("build-all", ["min-js", "copy-html"]);
//Build End

Thanks, hope this will help 🙂

Author:

Since March 2011, have 8+ years of professional experience on software development, currently working as Senior Software Engineer at s3 Innovate Pte Ltd.

Leave a Reply