gulp.js + browserify：动态生成特定于开发的文件

Advait 发表于 Dev

优势

我有一个应用程序，其中包含一些特定于开发的调试代码。当前，所有开发代码都由dev文件顶部的变量保护。这是我的应用程序执行的示例：

var dev = true;

if (dev) {
  console.log("Hello developer");
} else {
  console.log("Hello production");
}

在部署应用程序时，必须手动将dev变量的形式从true更改为false。糟透了

我正处于从手动构建迁移到gulp.js的中间阶段，我想彻底解决此开发与生产构建问题。我在考虑以下问题：

// Inside main.js
var dev = require('./isdev');
if (dev) //...

// Inside isdev.js:
module.exports = true;

现在，当我为生产而构建时，不是要手动将dev标志设置为false，而是要将isdev.js从替换module.exports = true;为module.exports = false;。我的具体问题是，如何使gulp自动化，从而gulp development生成带有的文件dev = true和gulp production生成具有的文件dev = false。

优势

这是对有好奇心的人的更新。

首先，我有一个options.js：

exports.dev = false;

我也有options_dev.js：

exports.dev = true;

在中gulpfile.js，我有以下代码可以解析输入参数：

// 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

最后，当我通过管道浏览器化时，我具有以下内容：

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

神奇之处在于，使用了一个自定义的resolve函数，./options并与之动态交换以options_dev进行开发构建。browserify文档说：