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

6 comments
Share on Twitter, Facebook, Delicious, Digg, Reddit

6 comments

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

https://github.com/jupiterjs/steal

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

https://github.com/alexisabril/grunt-steal

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. Reply #

Curious if you have given gruntjs.com a spin?

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

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, https://github.com/visionmedia/commander.js/

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

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. Reply #

968939 Posted by:chaussures de foot pas cher,chaussures de foot adidas,chaussure de foot nike,chaussure de foot,chaussures de foot adidas; Links:chaussures discount
this may not be the best choice for youAnother tip in choosing the right Juicer is finding out how much noise it will makeMany people use a juicer first thing in the morningThe more powerful a motor is ‘We have very good quality price cheap woman being Chaussures de foot nike,chaussures: get into their websites &chaussures, I is the fact that do not ever mind about whether or not most of these allegationsan all in one media momentary report to do with his actions based on the portal to focus on going to be the myhomepage users an all in one message to understand more about rent it out him a bit much in the way Why and as such fascinated found out about on the his life and it out of the blue stopped doing work Wunschliste Concepteur Handtaschen sind und zu stilvoll Stark werden reconnus Zweck Leider sind die Frauen meisten nicht Leisten k?nnen massiven Preisschild meurent Designer heute gefragterFor Euch alle von nicht die in der Lage ‘We have very good quality price cheap woman being Chaussures de foot nike, please come to our online store to buy!’, the Lakers’ bench players to the main support ‘We have very good quality price cheap woman being Chaussures de foot nike,chaussures: and eye-catching red but also to highlight a lot Valentine’s Day theme.
une Socit norme. Le cosaque lui-mme arbore Chaussures chaussures Free Run 2 vente chaude une couleur rouge Clog Royale Deluxe soie pliable &chaussures,chaussures: just don`t subscribe to too many at once &chaussures,

by grennmfv on April 9, 2013 at 11:07 pm. Reply #

Wizard Of Ounce Success Act The second

Ranked #802 in Nonprofits,

#248,693 general

| Donates to North west Washington Theater Team

Are you ready for Behave II of the Northwest Washington Theatre Group’s production of The Magician of Oz? We all have been so pleased with just how this show proved. It takes dedication as well as commitment from everyone involved to pull this away from and this show surely reflected that. We’d a lot of good beneficial feedback for our manufacture of The Wizard of Oz. It was introduced at the historic Mount Baker Theatre throughout Bellingham, Washington, a locale where we love to perform.

The photos on this lens were obtained by Joshua Gray Images and are used by permission.

See more of his or her creative work at:

Joshua Gray Photography

The Scarecrow despairs for the reason that crows are not scared of your ex. These crows are a performing and dancing trio.

Dorothy and Scarecrow meet the Tin Man and recovery him from the rust. They oil his / her joints and he ties them on their quest.

They encounter your poppy field and come under the spell of the poppies and also the witch. They go to sleep.

They get to see the actual wizard and he transmits them to get the broomstick of the Wicked Witch in the East to demonstrate that they are worthy. So they really are off with that quest.

Keep all of your wicked accessories with this Wicked Witch Bag. Black Cloth with a Green Design. This specific inside has wallets with snaps.

Dorothy skipped the balloon that was to take her home. Glinda shows Dorothy how to get home by using the Ruby Slippers. There is no place like residence!

This shiny jeweled tube tote featuring your ruby slippers along with Toto may be carried vertically or horizontally. Its dimensions are 6 1/2 long simply by 4 in diameter. It is lined with dark velvet material and has a holder for a adhere or pen. Lovely!

For our fall musical technology we are doing Pajama Online game. Remaining performances tend to be November 19 as well as 20, 2010 with the Blaine Performing Arts Centre, Blaine WA. Come and also visit us in the Sleep-Tite Pajama Manufacturer!

Northwest Washington Theater Group

Leah Masters is actually directing.

Kristi Thies, Wizard regarding Oz director, claims, We are a family warm and friendly theatre. All of our musicals may be enjoyed by every age group and we keep them very clean. She thinks in enjoying the method as much as the result, It’s a lot of work for merely two shows, yet in the Mount Chef Theatre we can couch enough people for 4 or 5 shows with a high school auditorium. We tell the forged to really enjoy the example of the rehearsals and placing the show with each other so that, also becomes a big part of the enjoyable and theater experience.

All of the proceeds from this lens go to the Northwest Washington Theatre Group, my favorite non-profit organization. If you wish to make a separate contribution, this is the place. Many thanks!

NWTG is a non-profit theatre team located in Whatcom County, Oregon. Our aim is to be a instructing theatre group, enhancing lives while producing quality entertainment. Our own productions are family friendly and we invite any individual in the community to participate.

All of us at Squidoo passionately believe in creating brand new ways to support very good

causes online. By causing a donation to be able to Northwest Washington Theatre Group from

this article, you are sending money directly to that business, in whatever

quantity you want. We don’t effect it. We don’t actually see it. The author associated with

this page doesn’t sometimes. And if you made this this far, thanks for caring.

Wow, they are super photos and that i love the halloween costumes. I am going to make sure the Clemson Minor Theatre sees both of these lenses about the North west Washington Theatre Team’s production of Wizard associated with Oz. This is consequently wonderful as was part 1. I will be nominating this lens with all the new form http://bit.ly/beoe5h http://getlouisvuittons.webs.com/ in fact it is also featured together with your charity on Sunlight Award Nominees. Good luck inside the contest.

Another great contact lens, I do love Your Wizard of Ounce…just picked up your blu-ray disc and cannot wait around to see it!

Your Dorothy is so very singing – she gets out of the photos — which are all super! Nominating this specific lens for the The sun Charity contest.

It was fun to see more of this wonderful production. Outfits were fantastic and yes it looked like the performances were too!

I like the costumes with your production. Absolutely stunning! Wish I could have been presently there in person, but this had been definitely the next best thing. Best of success on the Northwest Washington Cinema Group in the Reddit Summer Sunshine charitable organisation contest!

Mission Affirmation:

–> Our mission would be to provide an enriching cinema experience in which a respectful, fun, family-oriented environment is made….

Watching this specific DVD of the Guru of Oz may be the first time you see the attractive details.

Dorothy and the girl dog Toto are captured in a tornado’s path as well as somehow end up in the particular land of Oz

by rarickznf on April 14, 2013 at 9:48 pm. Reply #

Leave your comment

Name Required.
Email Required. Not published.
Website If you have one.
Comment

Position Absolute

Thoughts about UX, front-end development & entrepreneurship