Using Gulp to speed up web development
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
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:
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
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.
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.