Using Gulp to speed up web development

Gulp is an amazing task runner, written in JavaScript, that can help you in many different steps while developing your application. In this article, I'm going to talk about how I made smoother the development process of the ngWYSIWYG Angular component.

The component and it's history

First of all, I would like to explain what this component is. ngWYSIWYG, as the name already anticipates, is a 'What You See Is What You Get' editor for Angular (ng) applications. Psergus made a great job creating it almost two years ago. This component is very lightweight (~25KB minified) and helps me a lot in different projects.

First step: splitting up the source code

Before using Gulp, the component used to have all its JavaScript source code in a single .js file. This file held the logic for five different angular directives in almost 700 lines of code. So, to provide a better organization and a better separation of concerns, I've split it in six files, one for each of the five directives and one for the module itself (well, actually it now has 8 files, since we have included 2 services, but anyway).

Things were getting better now, but what about the developers who wants to use our component? Should they reference each of these files? Since there is no reason to reference them in separate, I chose to use Gulp and gulp-concat plugin to concatenate all files in a single one to distribute it. The following code shows how easy this task is accomplished:

Look how amazingly easy is to concat different files in one with gulp-concat

Nice, in just 10 lines of code I've made gulp concatenate all our source code in a single file.

For the sake of completeness, and to help anyone there who is wondering what ‘./src/js/**/!(wysiwyg)*.js’ means and why it is there, remember I've told that one of the six files was for declaring the module itself? This file is called wysiwyg.js and its source code has to come first, since all other directives are include in the module defined here.

Second step: uglifying

After concatenating all our code in a single file again, the next logical step would be minify it to distribute it as small as possible. In the JavaScript world we actually have two alternatives: minify it as is, which just remove white spaces and redundant/optional characters, or uglify the source code, which makes it much harder to read.

Although I’ve opted to uglify the code, and I followed this way because it actually save a few extra bytes by changing the name of functions and properties, both alternatives are handled by gulp-uglify plugin. Check it out how to use this plugin:

Another prove of how easy it is to use Gulp to streamline the development/release process. In less than 15 lines of code I’ve used two Gulp plugins, the aforementioned gulp-uglify that uglified our code and gulp-rename to add a .min suffix to the filename.

Third step: web-serving and watching

So now we have our code with a good organization, having each directive on it’s own file, and we able to concatenate these files in a single one and uglify it to make as small as possible. But what about manually testing new features that we develop? Well, another task easily solved by Gulp and its incredible plugins.

In this case I have used gulp-webserver to serve static files and Gulp’s watch default task. Putting them together, I was able to keep a server running and trigger concat and uglify tasks whenever I made a change to one of the source files.

Like that, to start developing and being able to check any changes on the fly, I just have to run gulp develop and Gulp takes care of uglifying the code whenever a source file gets altered. The following gist is just an example of a html to be hosted by gulp-webserver plugin.

Running gulp develop makes gulp-webserver start hosting everything on the root folder of the project. After that it’s just a matter of opening a browser and going to http://localhost:8000/

Conclusion

As you can see it was really easy to use Gulp and its plugins to automate all tasks described here. And I can assure you, there are a lot of other tasks that can be automated by Gulp as easily as the ones showed here. To name a few: run tests, bump (update) versions on package.json and bower.json, release these versions (pushing to a git repo), transpile (from coffeescript, TypeScript, or whatever) and so on.

PS. I would like to makes things clear here. In this article, when creating the gists above, I have made a few changes to the real source code to make things easily to grasp. If you are interested you can check the real file here or get in touch with me. Feel free to leave a comment.