98

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
Fdr
  • 3,726
  • 5
  • 27
  • 41

6 Answers6

140

Pipe it through uglifyjs:

 browserify main.js | uglifyjs > bundle.js

You can install it using npm like so:

 npm install -g uglify-js
hughsk
  • 3,822
  • 1
  • 21
  • 16
topek
  • 18,609
  • 3
  • 35
  • 43
  • 3
    How to do this with grunt browserify/watchify task? – Greg Ennis Dec 29 '13 at 22:32
  • 1
    If you use grunt I would recommend to do it in two steps. First compile with browserify and then minify. The advantage is that you can have a development build with source maps and a production build that strips everything. – topek Dec 30 '13 at 08:08
  • Yes thats what I ended up doing. Its actually 3 steps, you have to clean up the intermediate file. Thanks! – Greg Ennis Dec 31 '13 at 00:01
  • 8
    and what if i want a sourcemap for my uglified files - that will point to the code before "browserification"? – Thomas Deutsch Jan 13 '14 at 12:27
  • Use the `sourceMapIn` option on grunt-uglify (https://github.com/gruntjs/grunt-contrib-uglify#sourcemapin) to pass in the source map that browserify created. Be aware of this bug though: https://github.com/gruntjs/grunt-contrib-uglify/issues/195 – Aaronius May 01 '14 at 15:25
  • 3
    @ThomasDeutsch I [made a plugin for that](https://www.npmjs.org/package/minifyify). – Ben May 19 '14 at 21:49
  • Is there a way to concatenate and minify multiple browserify scripts? – CMCDragonkai Jun 06 '14 at 08:08
  • @CMC See Keith Cirkel's blog: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/ He shows how to join multiple steps together. – akauppi Apr 19 '15 at 10:32
  • @topek Unfortunately with your solution, I always get this error message: Unexpected token punc «,», expected punc «:» Error at new JS_Parse_Error (/usr/local/lib/node_modules/uglify-js/lib/parse.js:196:18). – Nizar B. Aug 30 '15 at 21:31
22

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!)

Ben
  • 1,292
  • 9
  • 17
15

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

srgstm
  • 3,649
  • 2
  • 24
  • 26
  • It still requires using the uglify pipe shown in the top answer. They say so right there in the beginning of their doc. – carlin.scott Oct 11 '16 at 19:36
15

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.

Gary Ott
  • 381
  • 2
  • 14
5

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
Alvin Konda
  • 2,898
  • 1
  • 22
  • 22
4

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
user
  • 23,260
  • 9
  • 113
  • 101