如何使用 Pug 缩小/丑化内联 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 缩小代码？我还没弄清楚如何在

script.

标签上使用过滤器（Uglify JS）。

Answer 1

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

npm i jstransformer-uglify-js

2. 现在，您应该能够使用

   :uglify-js

   filter 渲染以下模板。

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

Answer 3

首先，安装此处记录的过滤器：https://pugjs.org/language/filters.html

下面是一个带有 javascript 和 css 的 pug 文件示例。还显示接受

html_title

和

meta

标签。

测试.pug

title

使用pug时，传入minify选项。

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(name="description", content=html_title)
    title #{html_title}
    script(language="javascript")
      :uglify-js
        const rootObserver = new MutationObserver(function(mutationList, argObserver) {
          const rootNode = document.getElementById("root")
          if (rootNode.childElementCount > 0) {
            const loaderNode = document.getElementById("loading-bar")
            if (loaderNode) {
              argObserver.disconnect()
              loaderNode.remove()
            }
          }
        })
        document.addEventListener("readystatechange", function(event) {
          if ("interactive" === event.target.readyState) {
            const rootNode = document.getElementById("root")
            if (rootNode) {
              rootObserver.observe(rootNode, { 
                attributes: false,
                childList: true,
                subtree: false 
              })
            }
          }
        })
        
    style(type="text/css")
      :clean-css
        .loading-bar {
          z-index: -1;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 0.5rem;
          background-color: rgba(5, 5, 5, 0.2);
          width: 20rem;
          overflow: hidden;
          text-align: center;
        }

        .loading-bar-shuttle {
          width: 100%;
          height: 100%;
          background-color: rgb(5, 5, 5);
          animation: indeterminateAnimation 2s infinite linear;
          transform-origin: 0% 50%;
        }

        @keyframes indeterminateAnimation {
          0% {
            transform: translateX(0) scaleX(0);
          }
          40% {
            transform: translateX(0) scaleX(0.4);
          }
          100% {
            transform: translateX(100%) scaleX(0.5);
          }
        }

  body
    div(id="loading-bar" class="loading-bar")
      div(class="loading-bar-shuttle")
    div(id="root")

参考：

https://pugjs.org/api/reference.html#pugcompilesource-options