How to properly use dev and prod resources in NodeJS / Express / Jade

Question

I have a NodeJS app with Express based framework and Jade module for views. I need to use the full version of my assets on the development machine and the min version on the production machine.

Can you explain how best to do this?

EDIT: If you put a minus, please describe the reason.

Answer 1

Not sure why there is no “official” way to do this (compared to what Ruby on Rails does).

Here are some suggestions:

DIY

Here is what I have done so far:

When starting the server, I run uglify-js in all js files (under ... / js and create a mini version under ... / min) with something like this (apart from reading / writing files):

var jsp = require('uglify-js').parser; var pro = require('uglify-js').uglify; var ast = jsp.parse(code.toString('utf8')); // parse code and get the initial AST ast = pro.ast_mangle(ast); // get a new AST with mangled names ast = pro.ast_squeeze(ast); // get an AST with compression optimizations var final_code = pro.gen_code(ast); // compressed code here 

then in html templates based on some environment variable for starting the production environment, I create a path for the <script> tags either to the point ... / js or ... / min.

This is not very much (where you would group all js files into one minimized to reduce the number of browser requests, etc.), but hopefully this can help you create your own strategy.

Peeler

However, I decided to try piler ( https://github.com/epeli/piler ), which seems to be the best alternative to the DYI way.

Using Grunt

Grunt.js ( http://gruntjs.com/ ) is also quite suitable for supporting preprocessing files (html, js, css, ...)

Here are a few pointers:

• grunt-recess: https://github.com/sindresorhus/grunt-recess (especially interesting if you use less)
• how to configure grunt.js for mini files separately
• Grunt tasks for processing HTML files and creating a deployment directory for optimized files ( https://gist.github.com/necolas/3024891 )

Answer 2

I see minimization as a build step and prefer not to burden this application at run time. Therefore, I would like to configure my HTML files to refer to the paths to the files that are generated from the build tool, and then use the build tool to find out if it should be minimized.

I did not need to do this conditionally, because I did not need to have irreplaceable code in the browser. With grunt set up to watch the source files and automatically recompile, I can edit the source JavaScript file and it will automatically rebuild and put in the appropriate place of execution. However, I could see that this is useful for navigating through code. IE 9 has a formatter in its dev console, which is useful for debugging mini-code, but I'm not sure how common this is in browsers.

If I needed to skip mining in development, I would first check if I can make the grug uglify task use a configuration setting such as an environment variable or npm setting, etc., to decide whether to guess or not. If this is not possible, I would do a separate grunt task called "devBuild" that does everything except uglify.