A bit confused with factor-bundle and grunt-browserify

Question

a bit of a noob question -- I'd like to create two bundles -- app_bundle.js, and landing_bundle.js.

They will both share react, and a few other files, so I thought it would be a good idea to extract those out into a different, common bundle.

I found factor-bundle, but am having trouble getting it to work. This is what my config looks like for now:

browserify: {
  app: {
    files: {
      '<%= yeoman.tmp %>/scripts/app_bundle.js': ['<%= yeoman.tmp %>/scripts/app.js'],
      '<%= yeoman.tmp %>/scripts/landing_bundle.js': ['<%= yeoman.tmp %>/scripts/landing.js']
    },
    options: {
      watch: true,
      plugin: [
        ['factor-bundle', { o: [ '<%= yeoman.tmp %>/scripts/app_bundle.js', '<%= yeoman.tmp %>/scripts/landing_bundle.js'] }]
      ],
    }
  }
}

I ran it, got no errors, but am not sure where the factored bundle js actually is, I think it didn't actually save anywhere.

The thing I'm not understanding is, where will factor-bundle save the file? how would I go about specifying that?

Answer 1

In case you're still looking for help with this, here's how I have it set up in the app I'm working on at the moment. This should output three files in the dist directory: app.js, landing.js and common.js. common.js should contain all the stuff that's common to app.js and landing.js. Let me know if this is helpful--I'm pretty new to this stuff too.

browserify: {
  app: {
    files: {
      'dist/scripts/common.js': [
        'src/scripts/app.js',
        'src/scripts/landing.js'
      ]
    },
    options: {
      watch: true,
      plugin: [
        ['factor-bundle', { o: [ 'dist/scripts/app.js', 'dist/scripts/landing.js'] }]
      ]
    }
  }
}