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

Question

我有一个应用程序,其中包含一些特定于开发的调试代码.目前,所有开发代码都由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;

现在,当我为生产构建时false,不想手动设置dev标志,我想将isdev.js替换module.exports = true;为module.exports = false;.我的具体问题是,如何自动gulp development生成gulp,以便生成一个文件dev = true并gulp production生成一个文件dev = false.

Answer 1

这是对那些好奇的人的更新.

首先,我有一个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);
  }
}))

魔法发生通过使用自定义功能的决心,动态交换./options与options_dev发展的基础之上.browserify文档说:

您可以为browserify提供自定义的opts.resolve()函数,或者默认使用browser-resolve.

当我们运行时gulp,我们构建了一个开发版本.当我们运行时gulp --prod,我们构建了一个生产版本.值require('./options').dev允许我们动态更改服务器端点等等.酷!