11ty

Eleventy Documentation

This is an older version of Eleventy. Full release history. Go to the newest Eleventy docs. You could try /docs/quicktips/inline-js/ although it may not exist.

Documentation Pages

Quick Tip #002—Inline Minified JavaScript

Originally posted on The Simplest Web Site That Could Possible Work Well on zachleat.com

This tip works great if you have small JS utilities that you’d like to have in your <head>. For example, this works great with the Filament Group loadJS or loadCSS utilities.

Installation #

npm install uglify-js to make the Uglify JS minifier available in your project.

Configuration #

Add the following jsmin filter to your Eleventy Config file:

const UglifyJS = require("uglify-js");
eleventyConfig.addFilter("jsmin", function(code) {
    let minified = UglifyJS.minify(code);
    if( minified.error ) {
        console.log("UglifyJS error: ", minified.error);
        return code;
    }

    return minified.code;
});

Create your JavaScript File #

Add a sample JavaScript file to your _includes directory. Let’s call it sample.js.

// Hi
console.log("Hi");

Capture and Minify #

Capture the JavaScript into a variable and run it through the filter (this sample is using Nunjucks syntax)

<!-- capture the JS content as a Nunjucks variable -->
{% set js %}{% include "sample.js" %}{% endset %}
<!-- feed it through our jsmin filter to minify -->
<script>{{ js | jsmin | safe }}</script>