node.js - 如何让 Jade 模板自动压缩内联 javascript？

Question

当我检查 html 页面源时，HTML 标记和文本内容被压缩，没有空白和行，而是内联 javascript。

Answer 1

刚刚在 Jade v0.30.0 中发现了一些对我有用的东西：

1. 使用 .uglify 扩展名重命名您的 .js 文件

2. 在您的 Jade 模板中，使用：

   include name-of-javascript-file.uglify
   

工作原理：深入研究 Jade 源代码，我发现了一个名为filters.js. 在那里，您会看到对transformers. 在lib/transformers.js（转换器模块）中，您将看到各种转换实用程序，包括uglify. 显然，如果您在include声明中匹配正确的文件扩展名，Jade 将调用任何这些转换器。

Answer 2

我不确定它还没有测试它，但你可以添加一个过滤器并使用UglifyJS。例如

var uglyParser = require("uglify-js").parser;
var uglyUgly   = require("uglify-js").uglify;

var uglify = function(str) {
  var ast = uglyParser.parse(str);
  ast = uglyUgly.ast_mangle(ast);
  ast = uglyUgly.ast_squeeze(ast);
  return uglyUgly.gen_code(ast);
}

老实说，我不知道把它放在玉的哪里，所以它被当作过滤器对待。现在你应该可以把它贴在https://github.com/visionmedia/jade/blob/master/lib/filters.js上。

玉的用法是：

script(type="text/javascript")
  :uglify
    <Your JavaScript Code>

我再次没有测试它。但我认为它应该工作。今天晚些时候我会测试它。

Answer 3

根据文档，您可以使用任何 JSTransformer 作为玉过滤器。所以，你通常会这样做来内联 JS：

script.
  (function doSomething () { … })();

你应该这样做：

script
  :uglify-js
    (function doSomething () { … })();