uglifyify

A browserify transform which minifies your code using UglifyJS2

npm install uglifyify
172 downloads in the last day
1 349 downloads in the last week
5 012 downloads in the last month

uglifyify

A Browserify v2 transform which minifies your code using UglifyJS2.

Installation

npm install uglifyify

Motivation/Usage

Ordinarily you'd be fine doing this:

browserify index.js | uglifyjs -c > bundle.js

But uglifyify gives you the benefit applying Uglify's "squeeze" transform before it's processed by Browserify, meaning you can remove dead code paths for conditional requires. Here's a contrived example:

if (true) {
  module.exports = require('./browser')
} else {
  module.exports = require('./node')
}

module.exports = require('./node') will be excluded by Uglify, meaning that only ./browser will be bundled and required.

If you combine uglifyify with envify, you can make this a little more accessible. Take this code:

if (process.env.NODE_ENV === 'development') {
  module.exports = require('./development')
} else {
  module.exports = require('./production')
}

And use this to compile:

NODE_ENV=development browserify -t envify -t uglifyify index.js -o dev.js &&
NODE_ENV=production browserify -t envify -t uglifyify index.js -o prod.js

It should go without saying that you should be hesitant using environment variables in a Browserify module - this is best suited to your own applications or modules built with Browserify's --standalone tag.

File Extensions

Sometimes, you don't want uglifyify to minify all of your files – for example, if you're using a transform to require CSS or HTML, you might get an error as uglify expects JavaScript and will throw if it can't parse what it's given.

This is done using the -x or --exts transform options, e.g. from the command-line:

browserify     \
  -t coffeeify \
  -t [ uglifyify -x .js -x .coffee ]

The above example will only minify .js and .coffee files, ignoring the rest.

Global Transforms

You might also want to take advantage of uglifyify's pre-bundle minification to produce slightly leaner files across your entire browserify bundle. By default, transforms only alter your application code, but you can use global transforms to minify module code too. From your terminal:

browserify -g uglifyify ./index.js > bundle.js

Or programatically:

var browserify = require('browserify')
var fs = require('fs')

var bundler = browserify(__dirname + '/index.js')

bundler.transform({
  global: true
}, 'uglifyify')

bundler.bundle()
  .pipe(fs.createWriteStream(__dirname + '/bundle.js'))

Not that this is fine for uglifyify as it shouldn't modify the behavior of your code unexpectedly, but transforms such as envify should almost always stay local – otherwise you'll run into unexpected side-effects within modules that weren't expecting to be modified as such.

npm loves you