CODEWITHSUNDEEP
angularjsminifygulpbrowserify
Michael Heuberger
Michael Heuberger

Reputation: 872

Browserify recipe for AngularJS + source maps + minification

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?

Upvotes: 0

Views: 611

Answers (1)

Ian Lim
Ian Lim

Reputation: 4284

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.

Upvotes: 1

Related Questions