如何在 NodeJS/Express/Jade 中正确使用 dev 和 prod 资产答案

【问题标题】：How use dev and prod assets in NodeJS/Express/Jade properly如何在 NodeJS/Express/Jade 中正确使用 dev 和 prod 资产
【发布时间】：2013-02-10 06:05:14
【问题描述】：

我有一个 NodeJS 应用程序，它具有基于 Express 的结构和用于视图的 Jade 模块。我需要在开发机器上使用我的资产的完整版本，在生产机器上使用最小版本。

您能解释一下我应该如何正确执行此操作的最佳做法吗？

编辑：如果加减号，请说明原因。

【问题讨论】：

标签： node.js express pug

【解决方案1】：

不知道为什么没有“官方”的方式来做到这一点（与 Ruby on Rails 相比）。

以下是一些建议：

自己动手

这是我到目前为止所做的：

在服务器启动时，我在所有 js 文件（在 .../js 下，并在 .../min 下创建缩小版本）上运行 uglify-js，类似这样（省去读取/写入文件）：

    var jsp = require('uglify-js').parser;
    var pro = require('uglify-js').uglify;
    var ast = jsp.parse(code.toString('utf8'));  // parse code and get the initial AST
    ast = pro.ast_mangle(ast);  // get a new AST with mangled names
    ast = pro.ast_squeeze(ast);  // get an AST with compression optimizations
    var final_code = pro.gen_code(ast); // compressed code here

然后在html模板中，根据一些环境变量来触发生产环境，我生成<script>标签的路径指向.../js或.../min。

这遗漏了很多内容（您可以将所有 js 文件分组到一个最小化的文件中以减少浏览器查询等的数量），但希望这可以帮助您制定自己的策略。

打桩机

也就是说，我一直想尝试 piler (https://github.com/epeli/piler)，这似乎是 DYI 方式的更好替代方案。

使用 Grunt

Grunt.js (http://gruntjs.com/) 也非常适合帮助预处理文件（html、js、css、...）

这里有几点建议：

grunt-recess：https://github.com/sindresorhus/grunt-recess（如果你少用的话特别有趣）
how to config grunt.js to minify files separately
处理 HTML 文件并生成优化文件部署目录的 Grunt 任务 (https://gist.github.com/necolas/3024891)

【讨论】：

感谢您的回复。如果可以使用 grunt 工具会很酷。
grunt 可以帮助运行缩小任务，并可能重新生成模板。但是，如果您想在两种模式下运行，这将无济于事（除非您运行任务以从生产环境或开发环境切换，这并不理想。您希望将其包含在代码中）。

【解决方案2】：

我将缩小视为构建步骤，并且不希望在运行时给应用程序带来负担。因此，我会设置我的 HTML 文件来引用从构建工具生成的文件路径，然后使用构建工具来确定是否要缩小。

我实际上不需要自己设置条件，因为我不需要在浏览器中包含未压缩的代码。使用 grunt setup 来观察源文件并自动重新编译，我可以编辑 JavaScript 源文件，它会自动重新构建并放置到适当的运行时位置。但是，我可以看到这对于单步执行代码很有用。 IE 9 在其开发控制台中有一个格式化程序，可用于调试压缩代码，但我不确定这在浏览器中有多普遍。

如果我要在开发中跳过缩小，我会首先检查是否可以让 grunt uglify 任务使用环境变量或 npm 设置等配置设置来决定是否实际进行 uglify。如果这不可能，我会创建一个名为“devBuild”的单独的 grunt 任务，它会执行除 uglify 之外的所有操作。

【讨论】：