Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

uglifyify

A browserify transform which minifies your code using UglifyJS2

Subscribe to updates I use uglifyify


Statistics on uglifyify

Number of watchers on Github 298
Number of open issues 29
Average time to close an issue about 2 months
Main language JavaScript
Average time to merge a PR 7 days
Open pull requests 12+
Closed pull requests 5+
Last commit almost 2 years ago
Repo Created over 6 years ago
Repo Last Updated over 1 year ago
Size 54 KB
Organization / Authorhughsk
Contributors13
Page Updated
Do you use uglifyify? Leave a review!
View open issues (29)
View uglifyify activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating uglifyify for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

uglifyify

A Browserify v2 transform which minifies your code using uglify-es.

Installation

npm install uglifyify

Motivation/Usage

Ordinarily you'd be fine doing this:

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

But uglifyify is able to yield smaller output by processing files individually instead of just the entire bundle. When using uglifyify you should generally also use Uglify, to achieve the smallest output. Uglifyify provides an additional optimization when used with Uglify, but does not provide all of the optimization that using Uglify on its own does, so it's not a replacement.

Uglifyify gives you the benefit of applying Uglify's squeeze transform on each file before it's included in the bundle, 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('uglifyify', { global: true  })

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

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

Ignoring Files

Sometimes uglifyjs will break specific files under specific settings it's rare, but does happen and to work around that, you can use the ignore option. Given one or more glob patterns, you can filter out specific files this way:

browserify -g [ uglifyify --ignore '**/node_modules/weakmap/*' ] ./index.js
var bundler = browserify('index.js')

bundler.transform('uglifyify', {
  global: true,
  ignore: [
      '**/node_modules/weakmap/*'
    , '**/node_modules/async/*'
  ]
})

bundler.bundle().pipe(process.stdout)

Source Maps

Uglifyify supports source maps, so you can minify your code and still see the original source this works especially well with a tool such as exorcist when creating production builds.

Source maps are enabled when:

  • You're using another transform, such as coffeeify, that inlines source maps.
  • You've passed the --debug flag (or debug option) to your browserify bundle.

Enabling --debug with browserify is easy:

browserify -t uglifyify --debug index.js
var bundler = browserify({ debug: true })

bundler
  .add('index.js')
  .transform('uglifyify')
  .bundle()
  .pipe(process.stdout)

If you'd prefer them not to be included regardless, you can opt out using the sourcemap option:

browserify -t [ uglifyify --no-sourcemap ] app.js
var bundler = browserify('index.js')

bundler.transform('uglifyify', { sourceMap: false })
  .bundle()
  .pipe(process.stdout)
uglifyify open issues Ask a question     (View All Issues)
  • about 3 years don't queue extra newlines to help with deterministic builds
  • about 3 years WARN: Couldn't figure out mapping for ?:3,234 - 1,327 []
  • about 3 years The 'ignore' option is broken for hidden files & files inside hidden directories
  • over 3 years Cannot find module 'uglifyify' from ...
  • over 3 years Use with babelify transform
  • almost 4 years SyntaxError: Unexpected token when trying to uglifyify this file (bootstrap-select)
  • almost 4 years uglifyify is dropping a file
  • over 4 years per-file uglify options
  • over 4 years Non-dead code removed
  • over 4 years cli options when run from API
  • almost 5 years Setting uglifyJS options
uglifyify open pull requests (View All Pulls)
  • 1. modify sourceMap regExp 2.dont't edit source map
  • deps: bump browserify version
  • Add a browserify 5+ peer dep
  • Allow sourcemap utf8 charset
  • use relative source paths in sourcemaps
  • Update dependencies
  • support --output option
  • Added dot option for minimatch
  • Maintain opts._flags for different transform runs
  • fix source map sourcesContent source property names
  • drive-by fix for minify options brokeness (replacement for PR#69)
  • Make a copy of incoming options
uglifyify list of languages used
Other projects in JavaScript