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

by Cedric Dugas on October 11, 2012

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
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 : {}
}; = [
]; = [
	// Dependencies
	// App files
]; = ["build/dist/templates.html"]; = ["build/dist/app.min.js"];
  if(exports) exports.filesArray = filesArray;

(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.


	load: configs.jsFiles[appmobile.configs.env],
	complete : function () {
function loadTemplates(){
	var templates = 0;
	$.each(appmobile.templates[appmobile.configs.env], function(i, template){
			url: template,
			type: 'get',
			success: function(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 ={
		return _fs.readFileSync(filePath, FILE_ENCODING);
	_fs.writeFileSync(distPath, out.join(EOL), FILE_ENCODING);
	console.log(' '+ distPath +' built.');
	src :,
	dest : 'dist/templates.html'
	src :,
	dest : 'dist/appfiles.js'
function uglify(srcPath, distPath) {
		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");

Concatenating files

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

	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

      if(exports) exports.appmobile = appmobile;

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

	src :,
	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.


Ever tried StealJS for your dependency management and minify/concat for production? Plus it’s not forcing AMD (coming in the next version, but not required).

You could then use Grunt with this plugin for easy and fast production builds:

I’m not a AMD fan for now either, so I hear ya on that ;)

by Guillaume Lambert on October 12, 2012 at 8:56 am. #

Curious if you have given a spin?

by cody lindley on October 12, 2012 at 10:51 am. #

I did,

I like grunt, but since my project is minimal and already well under way (a small backbone mobile web app with approx 10 pages) I wanted to mockup something really fast,

What I got here is the simplest way I can think of for doing it.

another interesting project is commander.js for node,

by admin on October 12, 2012 at 11:08 am. #

The build fails on windows because jps is undefined, even though using requirejs -o dest.js somesource.js works perfectly fine. Any idea why ?

by Matt on November 26, 2012 at 7:11 pm. #

After they ingested diet steaks, Accept is as true this is, I said hello. Enactment how old you are and simply not your

by curry shoes cheap on June 28, 2015 at 12:20 pm. #

The metal rails systems for closets are great. You can get acrylic shelves, chrome baskets and special slotted pieces for shoes and hats. The slotted systems are good as they provide ventilation which helps your clothes to breathe and are easy to maintin.

lancel lannister kimdir sac pas cher burberry short sac pas cher sac furla ete 2013 sac pas cher
Are excited to have Bob join our executive team, says Mishra. Extensive business experience, leadership skills, and IT expertise will be invaluable to RagingWire. Bob will take on the role of implementing the company business initiatives, executing the strategic vision, and directing the company IT operations.

chloe dzubilo sac pas cher ysl age expert nuit sac pas cher burberry klocka sac pas cher
Car nuts like me, the Denver Auto Show is a bit like a candy store, says Thom Buckley, chairman of the Colorado Automobile Dealers Association. Almost 40 different brands exhibiting at the same time, it a great opportunity to see and compare what currently on the market. And Chicago that affords the consumer or any fan of today automobiles this type of opportunity to compare so many different makes and models all under one roof..

longchamp sjaal sac pas cher louis vuitton rtw fall 2015 sac pas cher hermes skandal sac pas cher
You use your entire body at a high intensity, but not to worry you don have to do it for long! A sprint is a run at top speed. The key here is to drive your arms forward (because your knees will follow anything your arms do in a run) and drive your knees up. Because this is such a high intensity, anaerobic movement, take time in between sprints for your heart rate to drop a bit.

typographie longchamp sac pas cher miu miu bottes sac pas cher mulberry omr sac pas cher

chloe preece kcl sac pas cher
mcm python sac pas cher
chloe imdb sac pas cher
mcm dvr sac pas cher
louis vuitton blanc sac pas cher
li xuerui coach sac pas cher
gucci contact sac pas cher
burberry doudoune sac pas cher
miu miu burgundy leather jacket sac pas cher
coach bio sac pas cher
trang gucci nkt sac pas cher
ysl cheetah mp3 future sac pas cher
fendi effendi sac pas cher
prada uc196g sac pas cher
hermes objects sac pas cher
vip coach to kl sac pas cher
dior sunkissed sac pas cher
chloe auto thionville sac pas cher
burberry ogilvy sac pas cher
laura frati gucci fcem sac pas cher

by JohnMa on July 10, 2015 at 4:52 am. #

Our own tough found your own real estate at school and i also was aware of I had to bring them inside their sports. We

by burberry shirts cheap on July 20, 2015 at 4:16 am. #

within a party and you will see her dark fabric sandals no more than her caucasian wedding are dressed.

by curry one shoes on July 22, 2015 at 2:07 am. #

Welcome to shop the large inventory of in the online store for of superior quality and quite cheap prices. Find the best deals of here with free fast delivery available and order now.

by Coach Online Factory Store on August 10, 2015 at 6:17 am. #

charges composer continuing to do the effort your dog actually was pleased with anf the husband conducted very

by cheap adidas zx flux on August 27, 2015 at 7:52 am. #

the welter of visual and physical humour available to it. There were occasional funny moments, some

by cheap true religion on September 6, 2015 at 5:33 pm. #

purchase a pair of toned to middle heeled, Leg higher than average shoes or shoes that are very good and exempt from

by lebron 12 kids shoes on September 20, 2015 at 1:51 pm. #