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

Question

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

你能解释一下我该如何正确地做到这一点的最佳实践？

编辑：如果您选择减号，请说明原因。

Answer 1

不确定为什么没有这种“官方”方式（与Ruby on Rails相比）。

以下是一些建议：

DIY

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

在服务器启动时，我在所有js文件上运行uglify-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模板中，基于一些环境变量触发生产环境，我生成<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）

Answer 2

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

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

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