Minify Scripts/CSS in production mode with node.js

javascript css node.js minify production
Christian picture Christian · Feb 12, 2013 · Viewed 12.2k times · Source

I have a web app that runs in node. All the (client) Javascript/CSS files are not minified at the moment to make it easier to debug.

When I am going into production, I would like to minify these scripts. It would be nice to have something like:

node app.js -production

How do I serve the minified version of my scripts without changing the script tags in my html files? There should be something like: if I am in production, use these 2 minified(combined) scripts, else use all my unminified scripts..

Is this possible? Maybe I am thinking too complicated?

Answer

Golo Roden picture Golo Roden · Feb 12, 2013

You might be interested in Piler. It's a Node.js module that delivers all the JavaScript (and CSS) files you specify as usual when in debug mode, but concatenated and minified when in production mode.

As a special feature, you can force CSS updates via Socket.io in real-time to appear in your browser (called "CSS Live Updated" in Piler), which is quite awesome :-).

The trick is that inside your template you only have placeholders for the script and link elements, and Piler renders these elements at runtime - as single elements in debug mode, and as a dynamically generated single element in production mode.

This way you can forget about creating concatenated and minified versions of your assets manually or using a build tool, it's just there at runtime, but you always have the separated, full versions when developing and debugging.

Related questions

Webpack - sass loader cannot find images

The sass loader doc says: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". So i did as it tells, I have my index.html in my project root, then …

Read More
Module not found: Error: Can't resolve 'css-loader'

I'm using css-loader and get following error: ERROR in ./src/pages/home/index.js Module not found: Error: Can't resolve 'css-loader' in '/Users/jian/Documents/sina/webpack-barbarian-test' @ ./src/pages/home/index.js 2:0-20 @ multi ../webpack-barbarian/node_modules/webpack-dev-server/client?…

Read More
How can I check that an element is visible with Puppeteer and pure JavaScript?

I wish to check that a DOM element is visible with Puppeteer and pure JavaScript (not jQuery), how can I do this? By visible I mean that the element is displayed through CSS, and not hidden (f.ex. by display: …

Read More