AngularJS 的 Browserify 配方 + 源映射 + 缩小答案

【问题标题】：Browserify recipe for AngularJS + source maps + minificationAngularJS 的 Browserify 配方 + 源映射 + 缩小
【发布时间】：2014-09-01 23:30:33
【问题描述】：

我正在寻找一个可以缩小我的 AngularJS 代码并仍然提供源映射的有效方法。目前我有这个 gulp 任务，但缩小不起作用：

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()
        })
})

有什么线索吗？

【问题讨论】：

你想看一个 grunt 的例子吗？ :-)
嗯，好的。可能会有所帮助并提供一些提示。谢谢

标签： angularjs minify gulp browserify

【解决方案1】：

您可能会在此处看到example。该示例将输出一个缩小的 bundle.min.js 和一个 bundle.map。使示例有效的关键点：

已安装 debowerify
安装了 minifyify

package.json - 添加了转换属性

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

Gruntfile.js - 使用 preBundleCB 使 minifyify 工作

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

希望这个例子对你有用。

【讨论】：