gulp, browserify, maps?

Question

如何启用源映射？我正在进行以下操作：

  var browserify = require("gulp-browserify")

  gulp.task("compile:client", function() {
    gulp.src("src/client/app.coffee", {
      read: false
    })
    .pipe(browserify({
      debug: true // THIS DOES NOTHING :(
      transform: ['coffeeify'],
      extensions: ['.coffee']
    }))
    .pipe(rename('app.js'));
  });

哎呀...由于某些原因，在gulp-browserify的github页面上显示：

插件已被列入黑名单。

我不明白...我该如何使用browserify来处理我的coffeescript文件呢？

更新：哈！我错了：debug选项可以工作。它会将源映射信息直接添加到输出javascript文件中。真是太棒了。但问题仍然存在：为什么这个插件会被列入黑名单呢？

- iLemming

Answer 1

我通过爬取网络找到了一个解决方案，它看起来像这样：

var browserify = require('browserify');
var gulp = require('gulp');
var exorcist = require('exorcist');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps'); // https://www.npmjs.org/package/gulp-sourcemaps

gulp.task('browserify', function(){
    return browserify({
            entries: ['./file1.js'],
            debug: true
        })
        .bundle()
        .pipe(exorcist('./output.js.map'))
        .pipe(source('output.js'))
        .pipe(gulp.dest('./'));
});

gulp.task('together', ['browserify'], function() {
  return gulp.src('output.js')
    .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(concat('all-with-maps.js'))
      .pipe(uglify())
    .pipe(sourcemaps.write('.', {addComment: true /* the default */, sourceRoot: '/src'}))
    .pipe(gulp.dest('dist'));
});

确保您已安装最新版本的browserify（截至今天我使用的是5.10.0）。您过去需要在bundle()调用中传递{debug:true}，但现在它直接移到了browserify()中。

关于黑名单：最好直接使用browserify（）,就像我们这里所做的那样。似乎不需要插件。

- abourget

Answer 2

请看这里：

https://github.com/gulpjs/plugins/issues/47

还有这里：

https://github.com/gulpjs/gulp/issues/369

更新：

我认为下面的内容不会“混乱”。

var source = require('vinyl-source-stream');
var browserify = require('browserify');

var bundler = browserify('./js/index.js');

gulp.task('compile', function(){
  return bundler.bundle({standalone: 'noscope'})
    .pipe(source('noscope.js'))
    .pipe(gulp.dest('./dist'));
});

- Mangled Deutz

---

是的，但所有其他解决方案都很混乱。似乎许多人仍然依赖于插件，我想我也会坚持使用它，直到找到更好的方法。 - iLemming

我不明白:( noscope.js是什么？ 我该如何将其应用于我的情况？如果process.env.NODE_ENV === "development"，我需要将文件转换为咖啡风格并添加源映射。 - iLemming

noscope是browserify的一个选项。 noscope.js是您的文件名，实际上并不重要。只需阅读文档：https://www.npmjs.org/package/vinyl-source-stream和https://github.com/substack/node-browserify - Mangled Deutz

我正在努力寻找noscope选项的有用性。你能给予建议吗？谢谢。 - iLemming

你需要了解UMD（https://github.com/umdjs/umd）才能理解。然后（复制Browserify文档）：“当opts.standalone是非空字符串时，将创建一个名为该名称的独立模块和一个umd包装器。您可以使用字符串名称中的.作为分隔符，在独立全局导出中使用命名空间。例如：'A.B.C'”。 - Mangled Deutz