How can I have Minify/uglify inline JavaScript using Pug?

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.

Jacopo Pace · Accepted Answer · 2023-09-18 11:50:05Z

1

First make sure that JSTransformer Uglify JS is installed

npm i jstransformer-uglify-js

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

edited Sep 18, 2023 at 11:50

Jacopo Pace

5227 silver badges16 bronze badges

answered Jul 18, 2022 at 8:20

Deepak

367 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Venkataramana N · Accepted Answer · 2024-02-14 22:32:37Z

First, install filters as documented here: https://pugjs.org/language/filters.html

Below is an example pug file with javascript and css. Also shows accepting html_title for a meta and title tag.

test.pug

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

When using pug, pass in the minify option.

import fs from "fs"
import pug from "pug"
  
const template = pug.compileFile("test.pug", {
  minify: true
})
const result = template({
  html_title: "Test"
})
fs.writeFileSync("test.html", result)

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

Laurel · Accepted Answer · 2022-04-26 15:55:42Z

-1

Script: uglify-js

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

edited Apr 26, 2022 at 15:55

Laurel

6,23114 gold badges35 silver badges60 bronze badges

answered Apr 26, 2022 at 13:23

yanteng yu

1

1 Comment

Jakob Kenda Over a year ago

What do you mean by this?

Collectives™ on Stack Overflow

How can I have Minify/uglify inline JavaScript using Pug?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related