CODEWITHSUNDEEP
gulpbrowserify
boop
boop

Reputation: 7788

Gulp Browserify with glob and uglify/factor-bundle

I'm currently getting into browserify. I like it so far but before I start using it I want to automate it. Gulp is the build system of my choice.

So what I actually want to do is:

Get js/app/**.js, bundle it to js/bundle/ and extract common dependencies into js/bundle/common.js. In addition uglify everything and add source maps.

Well. The gulp support for browserify kinda seems poor, at least my google researches were pretty disappointing.

Anyway. What I've got so far. 

var gulp = require('gulp'),
    browserify = require('browserify'),
    factor = require('factor-bundle');

// ...

// gulp task
return browserify({
    entries: ['js/app/page1.js', 'js/app/page2.js'],
    debug: true
})
    .plugin(factor, {
        o: ['js/bundle/page1.js', 'js/bundle/page2.js']
    })
    .bundle()
    .pipe(source('common.js'))
    .pipe(gulp.dest('js/bundle/'));

Well this is neither uglifying nor adding sourcemaps and much less using a glob pattern. I can find an official recipe which shows me how to use the pipe to add additional transformations like uglify. But it's only for a single file.

Upvotes: 1

Views: 593

Answers (2)

Chris Dennis
Chris Dennis

Reputation: 1005

Thanks to Liero's answer, I got something very similar working. Here's the complete gulpfile:

const gulp = require('gulp');
const browserify = require('browserify');
const factor = require('factor-bundle');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('gulp-buffer');
const merge = require('gulp-merge');

gulp.task('bfb', function () {

    const fejs = 'public/javascripts/'  // location of source JS
    const fejsb = fejs + 'b/';          // location of bundles
    const modules = [ // aka entry points
        'accounts',
        'invoice',
        'invoices',
        // etc...
    ];
    const inputs = [];
    const streams = [];

    modules.forEach(function (module) {
        inputs.push(fejs + module + '.js');
        streams.push(source(module + '.js'));
    });

    const bundler = browserify(inputs, {});
    const commonStream = bundler.plugin(factor, { outputs: streams })
        .bundle()
        .pipe(source('common.js'));
    streams.push(commonStream);

    return merge(streams)
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        //.pipe(uglify())  // haven't tested this bit
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(fejsb));

});

Upvotes: 1

Liero
Liero

Reputation: 27328

as an outputs parameter to factor-bundle, use streams instead of file paths. You can do whatever you want with the streams then.

  var indexStream = source("index.js");
  var testStream = source("tests.js");
  var commonStream = bundler.plugin('factor-bundle', { outputs: [indexStream, testStream] })
    .bundle()
    .pipe(source('common.js'));


  return merge(indexStream, commonStream, testStream)
    .pipe(buffer())
    .pipe(sourcemaps.init({ debug: true, loadMaps: true }))
    .pipe(uglify())
    .pipe(gulp.dest('js/bundle/'))

Upvotes: 1

Related Questions