Browserify recipe for AngularJS + source maps + minification

Question

I am looking for a working recipe that can minify my AngularJS code and still provide a source map. Currently I have this gulp task but minification won't work:

gulp.task('browserify', function(cb) {
    var bundler = browserify({
            entries: [paths.browserEntry],
            globals: false,
            debug:   !settings.PRODUCTION
        })

    bundler
        .bundle()

        .on('error', cb)
        .on('log',   util.log)

        .pipe(gulpif(!settings.PRODUCTION, mold.transformSourcesRelativeTo(paths.js)))
        .pipe(source(paths.js))
        .pipe(buffer()) // because the next steps do not support streams
        .pipe(concat('bundle.js'))
        .pipe(gulpif(settings.server.minify.js, rename({suffix: '.min'})))
        .pipe(gulpif(settings.server.minify.js, uglify()))
        .pipe(gulp.dest(paths.js))
        .on('end', function() {
            cb()
        })
})

Any clues?

Will you like to see an example in grunt? :-)

Ian Lim
– Ian Lim

2014-09-07 04:40:44 +00:00
Commented Sep 7, 2014 at 4:40 — Ian Lim
– Ian Lim, Commented Sep 7, 2014 at 4:40
Hmmm, okay. Might be helpful and give some hints. Thx

Michael Heuberger
– Michael Heuberger

2014-09-07 08:24:02 +00:00
Commented Sep 7, 2014 at 8:24 — Michael Heuberger
– Michael Heuberger, Commented Sep 7, 2014 at 8:24

Ian Lim · Accepted Answer · 2014-09-07 14:36:51Z

1

You may see an example here. The example will output a minified bundle.min.js plus a bundle.map. The crucial points which makes the example works:

Installed debowerify
Installed minifyify

package.json - added transform property

"browserify": {
    "transform": [
      "debowerify"
    ]
  }

Gruntfile.js - using preBundleCB to make minifyify work

  preBundleCB: function (b) {
    b.plugin( minifyify,
      { output: './dist/bundle.map',
        map:'bundle.map'
      });
  }

Hope the example is useful to you.

answered Sep 7, 2014 at 14:36

Ian Lim

4,2943 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Browserify recipe for AngularJS + source maps + minification

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related