Using Visual Studio Code, Node.js and gulp.js to create a web application - Handling changes

Having gulp react to files that have been changed without having to re-run the script makes things a bit quicker and easier

This is going to be quite a short post, there's not a lot to getting the gulp script to re-process any changed files - but it's a very useful thing to have!

Other parts of this series

gulp.watch()

There's not a lot to talk about here, a small addition to the gulp script that consists of an additional task:

gulp.task('watch', (done) => {

    gulp.watch('./app/**', gulp.series('build'));

    return done();
});

This task is responsible for calling gulp.watch, telling it to look for changes to the folder that contains the applications source code and react to it by triggering the 'build' task. A task in isolation doesn't help though, in order to have it up and running when the gulp script is serving content a small tweak to the 'default' task is required:

gulp.task('default', gulp.series('build', gulp.parallel('watch', 'serve')));

Now, once the gulp script has built the application, it'll then start watching for changes and also serving content via gulp-server-io. Running the default gulp task, then modifying a file results in the command line showing this:

PS D:\Git\PreferenceCenter> gulp
[19:40:06] Using gulpfile D:\Git\PreferenceCenter\gulpfile.js
[19:40:06] Starting 'default'...
[19:40:06] Starting 'build'...
[19:40:06] Starting 'build:init'...
[19:40:06] Finished 'build:init' after 1.17 ms
[19:40:06] Starting 'build:copyangular'...
[19:40:06] Finished 'build:copyangular' after 19 ms
[19:40:06] Starting 'build:copyapp'...
[19:40:06] Finished 'build:copyapp' after 4.11 ms
[19:40:06] Finished 'build' after 28 ms
[19:40:06] Starting 'watch'...
[19:40:06] Starting 'serve'...
[19:40:06] Finished 'watch' after 26 ms
[19:40:06] [debugger] client is running
[19:40:06] [debugger] server is running 1.4.0-beta.1
[19:40:06] gulp-server-io (1.4.0-beta.1) running at https://localhost:8080
Starting WebSocket Server
[19:40:06] [Watcher] D:\Git\PreferenceCenter\.dev
[19:40:06] Finished 'serve' after 166 ms
[19:40:06] Finished 'default' after 199 ms
Reload client connected to server
Reload client connected to server
Reload client connected to server
[19:40:29] Starting 'build'...
[19:40:29] Starting 'build:init'...
[19:40:29] Finished 'build:init' after 1.19 ms
[19:40:29] Starting 'build:copyangular'...
[19:40:29] Finished 'build:copyangular' after 4.01 ms
[19:40:29] Starting 'build:copyapp'...
[19:40:29] Finished 'build:copyapp' after 2.43 ms
[19:40:29] Finished 'build' after 12 ms

The chunk of output in bold was generated after I made a change to index.html. Hitting F5 in the browser showed the change that I'd made, so that's job done! gulp-server-io has support for "live reload", so that's next on the list to get working. Taking having to press F5 out of the equation will streamline the process even further!

About Rob

I've been interested in computing since the day my Dad purchased his first business PC (an Amstrad PC 1640 for anyone interested) which introduced me to MS-DOS batch programming and BASIC.

My skillset has matured somewhat since then, which you'll probably see from the posts here. You can read a bit more about me on the about page of the site, or check out some of the other posts on my areas of interest.

No Comments