In this post we are going overview how we can run a task using gulp watch in Visual Studio Code. When a change occur the “watch()” API executes particular task.

Learn more about gulp: https://gulpjs.com/docs/en/getting-started/quick-start

Download sample angular application from . Extract the zip file and open it using Visual Studio Code.

Go to the Terminal then execute below command: “npm install”. After completing installation press “Ctrl+Shift+p” to open command palette like below image.

Choose “gulp: lib-js” to copy required libraries to lib folder. In terminal, execute “npm run build” command to build the application, then after successfully build, run the application using “npm run start” command. It will run the application in browser with

Watch() API

We already have seen that using task runner we can copy particular files using gulp task with “gulp: lib-js” command.

In our application changes we need to monitor our file changes ans then copy transfer from source to destination that will appear in browser automatically. Here comes the watch() API, that detact global project changes and perform the task. Open “gulpfile.js” to see the watch task:

gulp.task('dev-watcher-js-build', done => {
    gulp.watch('./src/**/*.js', gulp.parallel("dev-js"));
    done();
});

gulp.task('dev-watcher-html-build', done => {
    gulp.watch('src/**/*.html', gulp.parallel("dev-html"));
    done();
});
gulp.task('watcher', gulp.parallel('dev-watcher-js-build','dev-watcher-html-build'));
gulp.task('default', gulp.parallel('watcher'));

Now if we make any changes to our project files it’ll automatically detect and perform the particular task.

gulpfile.js: The full task is listed below:

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

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

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

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

gulp.task('lib-js', done => {
    gulp.src('./node_modules/core-js/**/*.+(js|js.map)')
        .pipe(gulp.dest(root_path.package_lib + 'core-js'));

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

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

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

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

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

    done();
});
//library End

gulp.task('dev-js', done => {
    gulp.src(['./src/**/*.js'])
        .pipe(gulp.dest(root_path.webroot + 'app'));
        done();
});

gulp.task('dev-html', done => {
    gulp.src('src/**/*.html')
        .pipe(gulp.dest(root_path.webroot + 'app'));
        done();
});

gulp.task("build", gulp.parallel("dev-js", "dev-html"));
//Build End

gulp.task('dev-watcher-js-build', done => {
    gulp.watch('./src/**/*.js', gulp.parallel("dev-js"));
    done();
});

gulp.task('dev-watcher-html-build', done => {
    gulp.watch('src/**/*.html', gulp.parallel("dev-html"));
    done();
});
gulp.task('watcher', gulp.parallel('dev-watcher-js-build','dev-watcher-html-build'));
//Watcher End

gulp.task('dev-js-minify', done => {
    gulp.src(['./src/**/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest(root_path.webroot + 'app'));
        done();
});

gulp.task("publish", gulp.parallel("dev-js-minify", "dev-html"));
//Publish End

gulp.task('default', gulp.parallel('watcher'));
//gulp.task('default', gulp.parallel('build'));
//gulp.task('default', gulp.parallel('publish'));

Hope this post is going to clarify and help better understand how to run tasks in Visual Studio Code, Thanks.