11ty

Eleventy Documentation

⚠️ This documentation is for an older version. Go to the newest Eleventy docs or check out the full release history.

Documentation Pages

Quick Tip #002—Inline Minified JavaScript

All Quick Tips

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 -->
<style>{{ js | jsmin | safe }}</style>

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