4

I have a NodeJS application with Express based structure and Jade module for a views. I need to use a full version my assets on a developer machine and min version in production machine.

Can you explain best practices of how should I do it properly?

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

Erik
  • 14,060
  • 49
  • 132
  • 218

2 Answers2

3

Not sure why there isn't an "official" way of doing this (compared to what Ruby on Rails does).

Here are a few suggestions:

DIY

Here's what I've been doing so far:

At server startup, I run uglify-js on all the js files (under .../js, and create the minified version under .../min) with something like so (leaving out the reading/writing of the 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 to trigger production environment, I generate the path for the <script> tags to either point to .../js or .../min.

This leaves out quite a lot (where you would group all js files into one minimized one to reduce the number of browser queries and such), but hopefully this can help you craft your own strategy.

Piler

That said, I've been meaning to try piler (https://github.com/epeli/piler), which seems to be a better alternative to the DYI way.

Using Grunt

Grunt.js (http://gruntjs.com/) is also quite suitable to help preprocess files (html, js, css, ...)

Here are a few pointers:

Community
  • 1
  • 1
Pascal Belloncle
  • 11,184
  • 3
  • 56
  • 56
  • Thanks for the reply. It could be cool if there is possible to use grunt tool. – Erik Feb 25 '13 at 09:10
  • grunt could help to run the minify task, and possibly regenerate the templates. But it wouldn't help if you want to run in both mode (unless you run a task to switch from production or development environment, which would not be ideal. You want this to be baked in the code). – Pascal Belloncle Feb 25 '13 at 09:51
0

I view minification as a build step and prefer to not burden the application at runtime with it. Therefore, I would setup my HTML files to refer to file paths which are generated from the build tool and then use the build tool to figure out whether or not to minify.

I haven't actually needed to make it conditional myself because I haven't needed to have unminified code in the browser. With grunt setup to watch the source files and recompile automatically, I can edit a JavaScript source file and it automatically gets rebuilt and placed into the appropriate runtime location. However, I could see this being useful for stepping through code. IE 9 has a formatter in its dev console which is useful for debugging minified code, but I'm not sure how common that is across browsers.

If I were to skip minification in development, I would first check if I can make the grunt uglify task use a config setting like an environment variable or npm setting, etc. to decide whether to actually uglify or not. If that is not possible, I would make a separate grunt task called "devBuild" that does everything except uglify.

Brandon
  • 9,822
  • 3
  • 27
  • 37