如何正确使用NodeJS/Express/Jade中的dev和prod资源文件

Question

我有一个基于Express结构和Jade模块的NodeJS应用程序。我需要在开发机器上使用完整版本的资源，在生产机器上使用压缩版本的资源。请问如何正确地实现这个功能？

编辑：如果您给出负面评价，请解释原因。

- Erik

Answer 1

不确定为什么没有像Ruby on Rails那样的“官方”方法来做这个（指压缩JS文件）。

这里有一些建议：

自己动手

到目前为止，我一直在做以下操作：

在服务器启动时，运行uglify-js对所有JS文件进行压缩（位于.../js下，并在.../min下创建被压缩版本），如下所示（忽略读写文件）：

    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 模板中，基于某些环境变量来触发生产环境，我生成了用于指向 .../js 或 .../min 的 <script> 标签路径。

这里排除了很多内容（你可以将所有 js 文件组合成一个最小化文件以减少浏览器查询的数量等），但希望这可以帮助你制定自己的策略。

Piler

话虽如此，我一直想尝试 piler (https://github.com/epeli/piler)，它似乎是 DYI 的更好替代品。

使用 Grunt

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

以下是一些要点：

• grunt-recess：https://github.com/sindresorhus/grunt-recess（如果使用 less，特别有趣）
• 如何配置 grunt.js 单独缩小文件
• Grunt 任务用于处理 HTML 文件并生成优化文件的部署目录 (https://gist.github.com/necolas/3024891)

- Pascal Belloncle

---

谢谢回复。如果能使用Grunt工具就太酷了。 - Erik

Grunt可以帮助运行压缩任务，并可能重新生成模板。但如果您想在两种模式下运行，它将无济于事（除非您运行一个任务来切换生产或开发环境，这并不理想。您希望这些都被编码固定）。 - Pascal Belloncle

Answer 2

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

实际上，我自己并没有需要条件地进行缩小化，因为我没有在浏览器中需要未缩小的代码。通过设置grunt来监视源文件并自动重新编译，我可以编辑JavaScript源文件，它会自动重新构建并放置到适当的运行位置。然而，我可以看到这对于逐步调试代码可能很有用。IE 9在其开发控制台中有一个格式化程序，对于调试缩小化的代码非常有用，但我不确定这在各种浏览器中有多常见。

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

- Brandon