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的文件。 < / p>

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（）函数，或者默认使用浏览器解析。

当我们运行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>

我使用以下代码段对其进行了测试，结果正常：

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

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

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

2 个答案: