Tag Archives: Bundling

Control Add-ins Supercharged: Automating gulp.watch

Yesterday you’ve seen how to use gulp to make it do something truly useful: bundling your JavaScript and CSS files. Introducing gulp for the purpose of bundling your files allows you to split your functionality into as many files as you want, but use only a single script and a single stylesheet file from your control add-in. That way you not only optimized how your browser loads the files, but you also eliminated the need to maintain your controladdin object file every single time a new JavaScript or CSS file is added (or an existing one is removed).

However, you still need to run gulp build every single time you want to build your bundles. If you forget that, your controladdin will not be updated with your changes.

Thankfully, gulp has an answer to this: the gulp.watch feature. That’s the topic of my next demo, that I’ve explained in the 05-gulp-watch branch of my supercharged-01 repository.

The Readme.md file of that branch explains how to configure the watch task in the gulpfile.js file, and how to configure VS Code to automatically run the watch task every time you open the workspace. Once you follow those instructions, you can work on individual JavaScript or CSS files without the need to run gulp build or to maintain your controladdin object file. The former is taken care of by gulp, and the latter is taken care by… well, gulp too. Gulp is cool, really 😎

Control Add-ins Supercharged: Teaching gulp some useful tricks

My last demo introduces gulp, an amazingly simple task automation tool. You’ve seen what it is, how to set it up, and how to create a simple hello-world task. Now it’s time to teach gulp some useful tricks and make it automate the “build” process for the JavaScript and CSS files.

The first demo in this series uses a single-file approach, and there I stated that it’s a bad thing to develop like that. It’s bad to put all the functionality in one single file. However, that rule applies for development, not for runtime. Your browser actually prefers using a smaller number of JavaScript (or CSS) files. That’s why typical runtime JavaScript libraries are bundled. On top of bundling, you’ll also want to minify your JavaScript and CSS files to make them as small as possible, to further improve the download and initialization speed.

These are the things that today’s demo uses. So, head over to the https://github.com/vjekob/supercharged_01/tree/04-gulp-useful branch, and check out how to configure your gulp to build your JavaScript and CSS bundles from your source files.