【问题标题】:gulp, browserify, maps?吞咽,browserify,地图?
【发布时间】:2014-07-03 06:10:42
【问题描述】:

如何启用源地图?我正在这样做:

  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'));
  });

哎呀......出于某种原因,在 github page 上用于 gulp-browserify 它说: 插件被列入黑名单。

我不明白...那我该怎么用 browserify 和我的咖啡脚本文件呢?

UPD:哈!我错了:debug 选项有效。它只是将源映射信息粘贴到输出 javascript 文件中。惊人的。问题仍然悬而未决:为什么这个插件被列入黑名单?

【问题讨论】:

    标签: coffeescript gulp browserify


    【解决方案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)。以前您需要将 {debug: true} 传递给 bundle() 调用 .. 但它已移至 browserify()直接。

    关于黑名单:我们认为直接使用browserify() 会更好,就像我们在这里所做的那样。似乎不需要插件。

    【讨论】:

      【解决方案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'));
      });
      

      【讨论】:

      • 是的,但所有其他解决方案都很混乱。似乎很多人仍然挂在插件上,我想我也会坚持下去,直到找到更好的方法
      • 我不明白 :( 什么是 noscope.js?我如何适用于我的情况?如果process.env.NODE_ENV === "development",我需要咖啡化我的文件并添加源映射
      • noscope 是 browserify 的一个选项。 noscope.js 是您的文件名,也无关紧要。只需阅读文档:npmjs.org/package/vinyl-source-streamgithub.com/substack/node-browserify
      • 我正在努力寻找 noscope 选项的用处。你能建议吗?谢谢
      • 您需要阅读 UMD (github.com/umdjs/umd) 才能理解。然后(复制 Browserify 文档):“当 opts.standalone 是非空字符串时,将使用该名称和 umd 包装器创建一个独立模块。您可以在独立全局导出中使用命名空间,使用字符串名称中的 . 作为分隔符。例如:'ABC'"