Here's an update to those who are curious.
First, I have an options.js
:
exports.dev = false;
I also have a options_dev.js
:
exports.dev = true;
Inside of gulpfile.js
, I have the following code that parses input arguments:
// Parse the arguments. Use `gulp --prod` to build a production extension
var argv = parseArgs(process.argv.slice(2));
var dev = !argv['prod']; // Whether to build a development extension or not
Finally, when I pipe to browserify, I have the following:
var resolve = require('browser-resolve');
// ...
.pipe(browserify({
debug: dev,
resolve: function(pkg, opts) {
// Replace options.js with options_dev.js if this is a dev build
if (dev) {
opts.modules['./options'] = 'src/options_dev.js';
}
return resolve.apply(this, arguments);
}
}))
The magic happens by using a custom resolve function, dynamically swapping ./options
with options_dev
for development builds. The browserify docs say:
You can give browserify a custom opts.resolve() function or by default it uses browser-resolve.
When we run gulp
, we build a development version. When we run gulp --prod
, we build a production version. The value of require('./options').dev
allows us to dynamically change things like server endpoints, etc. Cool!