Làm thế nào để làm cho mẫu Jade nén javascript nội tuyến tự động?

Question

khi tôi kiểm tra nguồn trang html, các thẻ HTML và nội dung văn bản được nén mà không có trống và dòng, nhưng nội tuyến javascript.

Answer 1

Tôi không chắc chắn về nó và chưa thử nghiệm, nhưng bạn có thể thêm một bộ lọc và sử dụng UglifyJS. Ví dụ:

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); 
} 

Thành thật mà nói, tôi không chắc phải đặt nó ở đâu để nó được coi là bộ lọc. Bây giờ bạn sẽ có thể chỉ cần dán nó tại https://github.com/visionmedia/jade/blob/master/lib/filters.js.

Việc sử dụng trong ngọc sau đó sẽ là:

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

Một lần nữa tôi đã không kiểm tra nó. Nhưng tôi nghĩ nó sẽ hoạt động. Tôi sẽ kiểm tra nó sau ngày hôm nay.

Answer 2

Chỉ cần phát hiện ra một cái gì đó mà làm việc cho tôi trong Jade v0.30.0:

1. Đổi tên tập tin .js bạn bằng tiện ích .uglify

2. Trong mẫu Jade của bạn, sử dụng:

   include name-of-javascript-file.uglify 
   

Lý do hoạt động: Tìm hiểu mã nguồn của Jade, tôi đã phát hiện ra tệp có tên filters.js. Trong đó, bạn sẽ thấy sự phụ thuộc vào transformers. Trong lib/transformers.js (của mô-đun máy biến áp), bạn sẽ thấy các tiện ích biến đổi khác nhau, bao gồm uglify. Rõ ràng, Jade sẽ gọi bất kỳ máy biến áp nào nếu bạn khớp với phần mở rộng tập tin phù hợp trong tờ khai include của bạn.

Answer 3

Theo the docs, bạn có thể sử dụng bất kỳ bộ lọc JSTransformer nào làm bộ lọc ngọc bích. Vì vậy, nơi bạn thường sẽ làm điều này với nội tuyến JS:

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

bạn nên làm điều đó như thế này:

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