如何使用Pug实现Minify/uglify内联JavaScript

Question

我正在为正在构建的网页使用Pug。在模块的末尾，我有一个script.标签(常规的script标签不能使用，因为它与jQuery不兼容(：

script.
// load more videos
$("#btn-more").click(() => {
$.get(`#{lang}/videos?quantity=#{numVideos + 2}`)
.done((videos) => {
$(videos).ready(() => {
$("#videos").replaceWith(videos)
})
})
})

最终生成未缩小的代码：

<script>// load more videos
$("#btn-more").click(() => {
$.get(`en/videos?quantity=6`)
.done((videos) => {
$(videos).ready(() => {
$("#videos").replaceWith(videos)
})
})
})</script>

有没有办法让Pug minify密码？我还没有弄清楚如何在script.标签上使用过滤器(UglifyJS(。

Answer 1

1. 首先确保安装了JSTransformer Uglify JS

npm i jstransformer-uglify-js

2. 现在，您应该能够使用:uglify-js过滤器渲染以下模板

script
:uglify-js
$("#btn-more").click(() => {
$.get(`#{lang}/videos?quantity=#{numVideos + 2}`)
.done((videos) => {
$(videos).ready(() => {
$("#videos").replaceWith(videos)
})
})
})

Answer 2

脚本：uglify js

// load more videos
$("#btn-more").click(() => {
$.get(`#{lang}/videos?quantity=#{numVideos + 2}`)
.done((videos) => {
$(videos).ready(() => {
$("#videos").replaceWith(videos)
})
})
})