如何使用 Pug 缩小/丑化内联 JavaScript？

Question

I am using Pug for a web page that I am building. At the end of a module I have a script. tag (the regular script tag cannot be used because it isn't compatible with jQuery):

script.

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

Which ends up producing code that is not minified:

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

Is there a way to have Pug minify the code? I have not figured out how to use filters (Uglify JS) on the script. tag.

Answer 1

Script: uglify-js

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

Answer 2

1. First make sure that JSTransformer Uglify JS is installed

npm i jstransformer-uglify-js

2. Now, you should be able to render the following template with :uglify-js filter.

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