So far, we have learned how to perform the following tasks:
- Writing modular JavaScript code that can be imported into other modules
- Reusing modules in client and server code through CommonJS and Browserify
- Managing node packages with npm
- Managing client packages with Bower
Now we're ready to bring this all together in a way that takes the burden of running all these commands away from us. Picture for a moment what it would be like if you had to write a few lines of code, save your work, skip over to the command line, run Browserify, then run Uglify-js, then run your unit tests, followed by a handful of other npm tools, and then finally hop over to a browser, refresh the browser, and see the updated app working. Oh, wait! You forgot to restart the game server, which is a Node.js app, and needs to be restarted after you change those files. So, you go back to the terminal, run a few more commands, and eventually, you see the new code in the browser.
If that mental exercise just made all those wonderful tools that we covered earlier in the chapter look like a lot of work, remain calm. There is yet another set of tools that we can count on to make our lives easier, and JavaScript development is a thing of beauty (as opposed to what it is commonly called, particularly by those who do not use the tools that we'll now discuss).
Grunt is a popular task runner tool that automates repetitive tasks you may need to do, such as running unit tests, bundling components, minifying bundles, creating API documentation from your source file comments, and so on. (Refer to http://gruntjs.com/.)
Grunt uses the concept of plugins, which are specific task configurations that can be shared and reused. For example, it is likely that you will want a plugin that watches a directory for changes, then runs Browserify when a change is triggered. (In other words, every time you save a file, a task will be run.)
You can write your own plugins by hand; although this is a straightforward process, it is verbose enough, so we will not get into it in this book. Thankfully, Grunt has a vast plugin listing with a plugin for just about everything that you will ever need, or at least everything that we will need for the purpose of this book.
npm install grunt-cli -g
No surprise here! We install Grunt through npm. Next, we need to install Grunt plugins using npm and package.json; the only thing is that we list them under devDependencies and not dependencies.
npm install grunt --save-dev npm install grunt-browserify --save-dev npm install grunt-contrib-watch --save-dev npm install grunt-contrib-uglify --save-dev
Next, we create a Gruntfile.js to configure our tasks. This file specifies targets and defines the behavior of each target. Most of the time, you will simply look at sample configuration files for whatever plugin you use and then tweak it to fit your needs.
In the specific case of using watch and Browserify, we need to simply tell the watch plugin to run the Browserify task when a change is observed, and in the Browserify task, we need to specify the most basic settings: an entry point file and an output bundle file.
The four parts that make up the Gruntfile are as follows:
- A boilerplate wrapper function
- The configuration for each task
- Manual loading of each plugin that is used by the task
- Registration of each task so that Grunt can execute them
// - - - - - - - // Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ browserify: { client: { src: ['./app.js'], dest: 'bundle.js' } }, watch: { files: ['**/*'], tasks: ['browserify'], } }); grunt.loadNpmTasks('grunt-browserify'), grunt.loadNpmTasks('grunt-contrib-watch'), grunt.registerTask('default', ['watch']); };
Inside grunt.initConfig, you configure each task, with the attribute name matching the name of the task. You then load each plugin calling the loadNpmTasks function and loading the corresponding dependency. Finally, you specify default tasks as well as any custom tasks and map them to their dependencies. Using the name used in the task registration will run that particular task.
grunt browserify
The preceding command will run the browserify task, which has been configured and loaded as shown previously. If you run the grunt command with no task specified will run the default task, which, in this case, will run the watch task.
Gulp is a popular alternative to Grunt, which claims to improve on Grunt by offering simpler configuration. (Refer to http://gulpjs.com/.) Whichever tool you use is up to you. Much like the kind of car you drive or the fast food restaurant you visit, using Gulp or Grunt is all about taste and personal preference.
npm install gulp -g npm install gulp-uglify --save-dev npm install gulp --save-dev
Gulp uses gulpfile.js as its configuration file.
// - - - - - - -
// gulpfile.js
var gulp = require('gulp'),
var uglify = require('gulp-uglify'),
gulp.task('minify', function () {
gulp.src('app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});The preceding configuration should look much more straightforward as compared to Grunt. If looking at it you guess that a task named minify is registered, taking a source file called app.js that is first uglified, then saved to a build directory, you guessed right.
To run the task, you can specify a default task or explicitly run the previously mentioned one with the following command:
gulp minify