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;

现在，当我为生产构建时，我不想手动将 dev 标志设置为 false，而是想将 isdev.js 从 module.exports = true; 替换为 module.exports = false;。我的具体问题是，如何使 gulp 自动化，以便 gulp development 生成带有 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

最后，当我通过管道连接到 browserify 时，我有以下内容：

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 的值允许我们动态更改服务器端点等内容。酷！

Answer 2

我看到的方法是在执行命令之前在命令行上设置环境变量。使用 Node.JS CLI（在类似 bash 的环境中）执行此操作的示例如下：

ENV=dev node

> process.env.ENV
'dev'

然后在你的代码中，你可以这样做：

var dev = process.env.ENV === 'dev'

所以对于 gulp，你可以使用：

ENV=dev gulp <task name>

我用下面的 sn-p 测试了这个，它可以工作：

gulp.task('dev', function(){
  if (process.env.ENV === 'dev')
    console.log("IT WORKED");
  else
    console.log("NO DICE");
});

编辑：

您可以在构建之前将环境写入文件isdev：

var fs = require('fs');
gulp.task('build', function(){
  if (process.env.ENV === 'dev')
    fs.writeFileSync('isdev', 'module.exports = true');
  else
    fs.writeFileSync('isdev', 'module.exports = false');

  // kick off build
});

现在，对于构建包中的任何require 调用，isdev 中都将显示正确的值。您也可以将其扩展到其他指定的环境（或其他配置标志）。