gulp, browserify, maps?

Question

How do I enable source maps? I'm doing this:

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

Ouch... for some reason on the github page for gulp-browserify it says: PLUGIN IS BLACKLISTED.

I don't get it... how the heck I'm suppose to use browserify with my coffeescript files then?

UPD: Ha! I was wrong: debug option works. It just sticks source maps info right there into the output javascript file. Awesome. Still the question remains open: why this plugin in blacklisted?

score 11 · Answer 1 · answered Aug 14 '14 at 05:34

I found a solution, by crawling the web, and it looks like this:

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

Make sure you have a recent version of browserify installed (I use 5.10.0 as of today).. You used to need to pass {debug: true} to the bundle() call .. but it has moved to browserify() directly.

Regarding the blacklisting: it is thought to be better to use browserify() directly, as we do here. There's no need for a plugin it would seem.

Mangled Deutz · Accepted Answer · 2014-05-15T10:34:56.233

3

Have a look over here:

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

and here:

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

UPDATE:

I don't think this below is "messy".

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

edited May 15 '14 at 10:34

answered May 15 '14 at 06:36

Mangled Deutz

11,384
6
39
35

Yup, but all other solutions are messy. Seems many people still hangin on the plugin, I guess I'll stick to that as well, till better way found – iLemming May 15 '14 at 06:42
I don't get it :( What is `noscope.js`? How do I apply to my situation? I need to coffeeyify my files and add source-maps if `process.env.NODE_ENV === "development"` – iLemming May 15 '14 at 17:17
noscope is an option of browserify. noscope.js is your file name, and doesn't really matter either. Just read the docs: https://www.npmjs.org/package/vinyl-source-stream and https://github.com/substack/node-browserify – Mangled Deutz May 15 '14 at 21:27
I'm struggling to find what noscope option is useful for. Can you advise? Thanks – iLemming May 16 '14 at 19:20
1

You need to read about UMD (https://github.com/umdjs/umd) to understand. Then (copying Browserify doc): "When opts.standalone is a non-empty string, a standalone module is created with that name and a umd wrapper. You can use namespaces in the standalone global export using a . in the string name as a separator. For example: 'A.B.C'" – Mangled Deutz May 17 '14 at 08:26

gulp, browserify, maps?

2 Answers2

Linked