Example of how to use it as a browserify plugin

[Pita]

That would be amazing! The readme only tells you how to use it from the command line

[corbanb]

+1

Been working on this most of the day and haven't been able to create 3 files on output. How does this look and what could be wrong?

/* browserify task
   ---------------
   Bundle javascripty things with browserify!
*/

var browserify   = require('browserify');
var watchify     = require('watchify');
var gulp         = require('gulp');
var source       = require('vinyl-source-stream');
var factor       = require('factor-bundle');
var mini         = require('minifyify');

var distDir = './public/dist/javascript/app/';
var outDir = './public/build/javascript/';

var factorEntries = [distDir + 'home.js', distDir + 'registration.js'];
var factorOutput = [outDir + 'home.js', outDir + 'registration.js'];

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

  var bundler = browserify({
    // Specify the entry point of your app
    entries: factorEntries,
    // Enable source maps!
    debug: true
  });

  var bundle = function() {

    return bundler
      .plugin(factor, {
        o: factorOutput
      })
      .plugin(mini, {
        map: 'bundle.map.json',
        output: './public/dist/javascript/bundle.map.json'
      })
      .bundle()
      .pipe(source('common.js'))
      .pipe(gulp.dest(outDir));
  };


  return bundle();
});

[corbanb]

Made some edits to the above in hopes it was easier to read. But basically I only get a common.js file out of this and it never builds home or registration. Thoughts?

[terinjokes]

Can you build from the command line, and if so, does the "home" or "registration" bundles actually contain application JavaScript?

[corbanb]

@terinjokes command line is giving me the correct output. there is application js in both files as well. its just when ran as the gulp plugin I only get the common.js file.

[corbanb]

To simplify the thread and have my exact examples here is the code for both to ensure I am giving the correct info.

browserify.js

/* browserify task
   ---------------
   Bundle javascripty things with browserify!
*/

var browserify   = require('browserify');
var watchify     = require('watchify');
var bundleLogger = require('../util/bundleLogger');
var gulp         = require('gulp');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');
var factor       = require('factor-bundle');
var mini         = require('minifyify');

var factorEntries = ['./public/build/javascript/app/home.js', './public/build/javascript/app/registration.js'];
var factorOutput = ['./public/dist/javascript/home.js', './public/dist/javascript/registration.js'];

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

  var bundler = browserify({
    // Specify the entry point of your app
    entries: factorEntries,
    // Enable source maps!
    debug: true
  });

  var bundle = function() {
    // Log when bundling starts
    bundleLogger.start();

    return bundler
      .plugin(factor, {
        o: factorOutput
      })
      // .plugin(mini, {
      //   map: 'bundle.map.json',
      //   output: './public/dist/javascript/bundle.map.json'
      // })
      .bundle()
      .on('error', handleErrors)
      .pipe(source('common.js'))
      .pipe(gulp.dest('./public/dist/javascript/'))
      .on('end', bundleLogger.end);
  };


  return bundle();
});

outputs ONLY common.js

commandline

browserify ./public/build/javascript/app/home.js ./public/build/javascript/app/registration.js -p [ factor-bundle -o ./public/dist/javascript/home.js -o ./public/dist/javascript/registration.js ] \
  -o public/dist/javascript/common.js

outputs all files as expected: common, home and regisitration

One odd thing I did notice is if I remove the ./ from the paths in the two arrays (factorEntries, factorOutput) I get an error around:

path.js:313
        throw new TypeError('Arguments to path.resolve must be strings');

But if I remove ./ from commandline all is working fine there.

I am curious if there is some odd pathing issue with factor-bundle as a plugin via gulp potentially.

Although these issues might be unrelated. Just wanted to point this finding out in hopes it helps to identify the issue.

[corbanb]

@terinjokes should I move this to another ticket? Seems like its not under the correct titling until fixed.

[terinjokes]

@corbanb there's really already issues open about it. Click the subscribe button on one of those.

[philipwalton]

I think this is actually just a bug, it has nothing to do with gulp.js. Unless I'm missing something, these two should be equivalent, but the JS version is not invoking the plugin at all.

# cli version
browserify ./core ./page1 ./page2 -p [ factor-bundle -o ./bundle/core.js -o ./bundle/page1.js -o ./bundle/page2.js ] -o ./bundle/common.js

// js version
browserify(['./core', './page1', './page2'])
  .plugin('factor-bundle', {
    o: ['./bundle/core.js', './bundle/page1.js', './bundle/page2.js']
  })
  .bundle()
  .pipe(fs.createWriteStream('./bundle/common.js'));

The JS version produces exactly the same code as when the plugin statement is completely removed.

Can someone confirm whether this is/isn't the correct syntax?

[cognivator]

I just confirmed the same problem noted by @philipwalton and @corbanb, with the same syntax as @philipwalton.

Prior to trying the programmatic avenue, I've been running the command line version from Grunt using the grunt-shell plugin, which works fine.

However, I now need to use bromote with browserify to allow the client-side script to load socket scripts that are only available at run-time via express routes (primus, primus.io, socket.io, etc.) If the programmatic use of factor-bundle worked properly, I'd be done. As it is, though, it appears I'll have to drop the factor-bundle goodness until the programmatic API is fixed.

[terinjokes]

There is now two examples of using the API in the README.