How to get minified output with browserify?

Just started to use browserify, but I cannot find documentation for how to get it spilling out minified output.

So I am looking something like:

$> browserify main.js > bundle.js --minified

Pipe it through uglifyjs:

 browserify main.js | uglifyjs > bundle.js

You can install it using npm like so:

 npm install -g uglify-js

As of 3.38.x you can use my minifyify plugin to minify your bundle and still have usable sourcemaps. This is not possible with the other solutions -- the best you can do is map back to the uncompressed bundle. Minifyify maps all the way back to your separate source files (yes, even to coffeescript!)

Or use uglifyify transform which "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."

After spending a few hours investigating how to construct new build processes, I thought others may benefit from what I ended up doing. I'm answering on this old question as it appears high in Google.

My use case is a little more involved than OP asked for. I have three build scenarios: development, testing, production. As most professional developers will have the same requirements, I think it's excusable to go beyond the scope of the original question.

In development, I use watchify to build an uncompressed bundle with source map whenever a JavaScript file changes. I don't want the uglify step since I want the build to finish before I've alt-tabbed to the browser to hit refresh and it's not of any benefit during development anyway. To achieve this I use:

watchify app/index.js  --debug -o app/bundle.js -v

For testing, I want the exact same code as production (e.g. uglified) but I also want a source map. I achieve this with:

browserify app/index.js  -d | uglifyjs -cm -o app/bundle.js      --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"

For production, the code is compressed with uglify and there is no source map.

browserify app/index.js  | uglifyjs -cm > app/bundle.js

Notes:

I have used these instructions on Windows 7, MacOS High Sierra and Ubuntu 16.04.

I have stopped using minifyify because it is no longer maintained.

There maybe better ways than what I am sharing. I have read it is apparently possible to get superior compression by uglifying all source files before combining with browserify. If you've got more time to spend on it than I have, you may wish to investigate that.

If you do not have watchify, uglify-js or browserify installed already, install them with npm thus:

npm install -g browserify
npm install -g watchify
npm install -g uglify-js

If you have old versions installed I recommend you upgrade. Particularly uglify-js as they made a breaking change to command line arguments which invalidates a lot of information that comes up in Google.

No need to use plugins anymore to minify while preserving a source map:

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js

I like terser which has support for ES6+ and some good comporession as well.

browserify main.js | terser --compress --mangle > bundle.js

Install globallly:

 npm i -g terser