为生产环境构建Grunt？

Question

我有两个如下所示的Grunt配置：

grunt.registerTask('default', ['copy','jade','sass','browserify']);
grunt.registerTask('dev',['copy','jade','sass','browserify','watch']);

现在因为我正在使用grunt-contrib-watch，所以我需要添加以下脚本。

script(src='//localhost:35729/livereload.js')

为了使实时重新加载功能能够正常工作，我该如何根据生产环境可选地添加脚本？拥有两个index.jade文件是一种选择，并且可以帮助我完成这部分工作，但是还有很多其他变量（例如API根目录等）取决于构建环境。在这种情况下，为生产和开发环境构建的最佳实践是什么？

编辑

只是为了确保。上面的index.jade只是一个例子。考虑以下js代码中的行：

RestangularProvider.setBaseUrl("http://localhost:3000");

参数需要在开发和生产环境中分别设置。在生产和开发环境中拥有两份代码是完全不合逻辑的。

- georoot

Answer 1

我更喜欢使用像--build这样的参数

index.jade

if env.debug
  script(src='//localhost:35729/livereload.js')

Gruntfile

module.exports = function(grunt) {
  var DEBUG = grunt.option('build') === 'dev';

  // Configure Jade to conditionally render livereload.js
  // with DEBUG === true

  grunt.initConfig({
    pug: {
      options: {
        data: function() {
          return {
            env: {
              debug: DEBUG
            }
          };
        }
      }
    }
  });
}

使用方法如下：

grunt dev --build=dev

你可以通过Grunt传递任何特定于环境的数据。

grunt --build=dev \
      --api-endpoint=/api/foo

- Lesha Ogonkov

---

这是grunt的一部分。我已经有两个grunt脚本来区分生产和构建。问题是如何将这些变量传递到在browserify中编译的JS文件中。此外，“--debug”标志仅显示构建的详细输出。 - georoot

你误解了我的意思。我已经知道了grunt文件中的构建环境，而且我可以有条件地构建index.jade，尽管这样做会很低效，因为会有两个文件。主要问题在于Angular代码。你看，在“dev”中，我们有一个单独的API端点，就像在“production”中一样。不能为每个代码分别设置两个文件。需要找到一种方法将grunt的环境传递给“browserify”的输入。 - georoot

我没有使用browserify，但是对于我的webpack配置，我通过推送DefinePlugin来修改配置，以切换开发/生产环境。 - Lesha Ogonkov