eleventy-plugin-concat
Eleventy plugin to bundle your scripts and styles
This plugin is contributed by Internet 2000 web studio, it is used to create green websites with Silex website builder
Links
-
The plugin on npm (
@silexlabs/eleventy-plugin-concat) - Github repo
Overview
- Add the plugin to your
.eleventy.jsconfig - Add
data-concatattribute to<script>,<script src=,<style>and<link rel="stylesheet" href=which are in the page<head> - After the site has been built by eleventy, the plugin will write new
script.jsandstyle.cssfiles with the content of all the scripts and styles withdata-concat - The plugin will also change you HTML to load the new script and style in place of the old ones
Tip: this plugin works great with eleventy-plugin-helmet which makes it easy to group scripts of templates in HEAD
Features
This is the roadmap and feature list:
- [x] Transform all generated pages after the build
- [x] Concat inline scripts
- [x] Concat loaded scripts from base url and get their content from file system
- [x] Concat loaded third-party scripts and fetch their content
- [x] Concat inline styles
- [x] Concat loaded stylesheets from base url and get their content from file system
- [x] Concat loaded third-party stylesheets and fetch their content
Example
page.njk (also works with liquid or other template language):
<!doctype html>
<html>
<head>
<script src="/site.js" data-concat></script>
<script src="/page.js" data-concat></script>
<script data-concat>
console.log('concat')
</script>
<link rel="stylesheet" href="/site.css" data-concat />
<link rel="stylesheet" href="/page.css" data-concat />
<style data-concat>
body { background: blue; }
</style>
</head>
</html>Generated _site/page.html:
<!doctype html>
<html>
<head>
<script src="/script.js"></script>
<link rel="stylesheet" href="/style.css" />
</head>
</html>Generated _site/script.js:
// ... content of site.js
// ... content of page.js
console.log('concat')Generated _site/style.css:
/* ... content of site.css */
/* ... content of page.css */
body { background: blue; }Usage
-
Install the plugin using npm:
npm install @silexlabs/eleventy-plugin-concat
-
Add the plugin to your
.eleventy.jsconfig:const pluginConcat = require("@silexlabs/eleventy-plugin-concat") module.exports = (eleventyConfig) => { eleventyConfig.addPlugin(pluginConcat, { baseUrl: 'http://localhost:8080', }) }
-
Use the global
data-concatattribute in your templates
Options
The default options are stored in src/defaults.js
| Name | Description | Default |
|---|---|---|
| jsUrl | Function which takes the current page and returns the URL of the generated script (what you want the plugin to insert in your HTML) |
page => \/js/${ basename(page.outputPath, '.html') }-concat.js`` |
| jsPath | Function which takes the current page and returns the path of the generated script relative the output dir |
page => \js/${ basename(page.outputPath, '.html') }-concat.js`` |
| jsSelector | Selector used to find the scripts to be concatenated in the HTML page | 'head script[data-concat]' |
| jsAttributes | Attributes you want the plugin to add to the JS tag in your HTML, e.g. async
|
'' |
| cssUrl | Function which takes the current page and returns the URL of the generated stylesheet (what you want the plugin to insert in your HTML) |
page => \/css/${ basename(page.outputPath, '.html') }-concat.css`` |
| cssPath | Function which takes the current page and returns the path of the generated stylesheet relative to the output dir |
page => \css/${ basename(page.outputPath, '.html') }-concat.css`` |
| cssSelector | Selector used to find the styles to be concatenated in the HTML page | 'head link[data-concat], head style[data-concat]' |
| cssAttributes | Attributes you want the plugin to add to the CSS tag in your HTML, e.g. data-custom="abcd"
|
'' |
| baseUrl | The URL where your site will be available, e.g. https://www.silex.me => https://www.silex.me/js/test.js will be read from file system in ./js
|
'http://localhost:8080' |