search

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
17.19k stars 494 forks source link

Minimize javascript on the fly #1438

Closed jasonday closed 4 years ago

jasonday commented 4 years ago

I am using frontmatter to list an array of resources for a specific template:

css: ["custom/example/prism-line-numbers.min.css", "custom/example/prism-live.css", "custom/example/prism-a11y-dark.css"]
topjs: ["custom/example/example.js", "custom/example/bliss.shy.min.js", "custom/example/prism.min.js", "custom/example/prism-line-numbers.min.js", "custom/example/prism-live.js", "custom/example/prism-live-markup.js", "custom/example/prism-live-css.js", "custom/example/prism-live-javascript.js"]

page.njk

{% if topjs %}
      {% for script in topjs %}
        <script src="{% baseUrl %}/{{script}}"></script>
      {% endfor %}
    {% endif %}

Is there an automated way for me to minimize these files on the fly?

There's a quicktip on inline js: https://www.11ty.dev/docs/quicktips/inline-js/ but frankly, I'm not sure how to loop through the arrays of js files to output a single minified file.

gobeli commented 4 years ago

A neat way to do this, is using a scripts.11ty.js file, which bundles your js files. A good example can be seen in the eleventastic starter project: https://github.com/maxboeck/eleventastic/blob/master/src/assets/scripts/scripts.11ty.js.

You can also use another bundler like rollup with the same approach if you're not a fan of webpack

zachleat commented 4 years ago

You might also check out this example which might be a bit simpler: https://github.com/11ty/11ty-website/blob/master/js/eleventy-js.njk (outputs to /js/eleventy.js which I reference like this <script src="/js/eleventy.js" type="module" async></script>)

zachleat commented 4 years ago

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!