Simple build script to minify and concatenate files using node.js

When you look to choose for a build system, you are certainly not confronted with a lack of choices. There is a ton of build technics out there and choosing one can easily become a long mission for greatness.

In my quest to build a web mobile app for CakeMail that can also be thrown into phonegap to package it as a native app I encountered this major problem, what to do with those 40+ js files and those 20+ html template files that I need to be injected when the app load.

The end result I wanted is something that would concatenate my js files, minify them, would concatenate my templates into one file, and all this sharing the same config file that my app use to load all those files in my dev & prod environment.

The code on github.

Yes, yes I know

I can already see requireJS screaming “MEEEEEEEEE” in your heads. While requireJS is certainly one of the most robust, javascript solution out there, call me crazy but I really do not like to have to be engulfed into an AMD module loader, change the way I work and just surrender the reins to requireJS.

It’s certainly not the most easy approach too, just have a look at this tutorial to get started. Personally I want to work my own way, I like to have partners in crime like Backbone and jQuery but I also like the way I work. I do not see the advantages of complexifying my stack, and certainly not for a small web mobile app.

Well, talking about the stack

config file (got all app configs including an arrays of files to load)
Yepnope (load all the app files)

jQuery and couple of friends
Backbone.js
Underscore templates
Simple php api wrapper

As you can see my stack is all front-end, with backbone.js at the core and with one simple php wrapper for the api that can be thrown away easily once I want to package the app natively.

Building with node.js

Node.js is really the perfect choice for the task, it got a simple syntax to concatenate files, installing the uglify-js module is really easy with npm and it’s fast as hell.

Let’s get started, with creating a config file

First thing first we want a config file that know all the dependencies needed for our app.

var configs = {
	// Default environnment
	env : "dev",
	templates : {},
	app : {}
};
 
configs.templates.dev = [
	"app/templates/dasboard.html",
	"app/templates/listing.html"
];
configs.app.dev = [
	// Dependencies
	"assets/js/jquery.js",
	"assets/js/jquery.cookie.js",
 
	// App files
	"app/js/app.js",
	"app/js/dashboard.js"
];
 
configs.templates.prod = ["build/dist/templates.html"];
configs.app.prod = ["build/dist/app.min.js"];
 
try{
  if(exports) exports.filesArray = filesArray;
}catch(e){
 
}

(Yeah the try catch looks weird, but it will be explain below)

Loading your app with yepnope

One nice thing about yepnope is that it does not get in your way, which is no simple feat when you check all the script loaders out there. Here we are going to use it the most simple way possible for our app context. When all the script files are loaded we are going to load our templates and then launch our app.

In the scenario here I load templates after our script because I just embed them using $.ajax and append(). Obviously you might want to do other stuff which is totally fine, the key thing here is that we load our files from the config file and we are going to use the same file for our build script later.

loadapp.js:

yepnope({
	load: configs.jsFiles[appmobile.configs.env],
	complete : function () {
		loadTemplates();
	}
});
 
 
function loadTemplates(){
	var templates = 0;
	$.each(appmobile.templates[appmobile.configs.env], function(i, template){
		$.ajax({
			url: template,
			type: 'get',
			success: function(data) {
				$("body").append(data);
				templates += 1;
				if(appmobile.templates[appmobile.configs.env].length === templates){
					Backbone.history.start({pushState: false})
				}
 
			}
		});
	});
}

Concatenate files and minify

That’s all good, but that codebase will in time become huge and we want to concatenate files and minify javascript, to do that we are going to use node.js and the uglifyJS package for minifying.

Installing node.js and uglifyJS

I’m not going to go in details here, if you are on osx just install brew then follow these instructions for node.js and npm.

With npm you can install uglifyJS, you should install it globally
npm install -g uglify-js

Then you need to do a simlink in your build folder
npm link uglify-js

The build script

That’s all good we are set with node and uglify, now let’s get into the nitty gritty, we are going to need 2 functions one that concats and one that minifies scripts. Here one article that really helped me get jump started.

So let’s have a look :

/* You need uglify
// npm install -g uglify-js
// npm link uglify-js
// Run that into node and voila bitch
*/
var FILE_ENCODING = 'utf-8',
 
EOL = '\n';
 
var _fs = require('fs');
var filesArray = require('../app/config')
 
function concat(opts) {
 
	var fileList = opts.src;
	var distPath = opts.dest;
	var out = fileList.map(function(filePath){
		return _fs.readFileSync(filePath, FILE_ENCODING);
	});
 
	_fs.writeFileSync(distPath, out.join(EOL), FILE_ENCODING);
	console.log(' '+ distPath +' built.');
}
 
concat({
	src : filesArray.configs.templates.dev,
	dest : 'dist/templates.html'
});
concat({
	src : filesArray.configs.app.dev,
	dest : 'dist/appfiles.js'
});
 
function uglify(srcPath, distPath) {
	 var
		uglyfyJS = require('uglify-js'),
		jsp = uglyfyJS.parser,
		pro = uglyfyJS.uglify,
		ast = jsp.parse( _fs.readFileSync(srcPath, FILE_ENCODING) );
 
	 ast = pro.ast_mangle(ast);
	 ast = pro.ast_squeeze(ast);
 
	 _fs.writeFileSync(distPath, pro.gen_code(ast), FILE_ENCODING);
	 console.log(' '+ distPath +' built.');
}
 
uglify('dist/appfiles.js', 'dist/appfiles.min.js');
 
console.log("and you're done");
process.exit(1);

Concatenating files

First got to build/build.js, in this file you will see the function concat, just below:

    concat({
	src : ['file1.js', 'file2.js'],
	dest : 'dist/concatenatedFile.js'
    });

It’s as simple as that, just tell the script what files you want to concatenate, your not confined to javascript file, you could also concatenate templates files.

Minify Javascript with UglifyJS

To use the minify script you will need to have uglifyJS installed in your app. Then much like concat, chose your already concatenate file and minify it.

uglify('dist/concatenatedFile.js', 'dist/concatenatedFile.min.js');

Loading the script

Just go into the build folder and do:

node build.js

and there you go, your files has been created. You could also put that command into a post-commit hook for profit!

Using an external array

You probably want to define your js files array somewhere else that will be used by both your app and your build script.

To do that you can first require your config file.

var conf = require('../app/config')

Then in your config file you need to tell node.js what this module returns. As you can expect that do not get so well with your normal app, that’s why at the end of the file we got

    try{
      if(exports) exports.appmobile = appmobile;
    }catch(e){
 
    }

It looks weird, but with node.js we do not have any window variable and in your app if(export) will throw an error.

Then you can change your concat in your build.js

concat({
	src : conf.app,
	dest : 'dist/concatenatedFile.js'
});

There you go, now your build script is completely integrated with your app dependencies.

You can download the code on github.