@silexlabs/eleventy-plugin-concat NPM

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

Overview

Add the plugin to your .eleventy.js config
Add data-concat attribute 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.js and style.css files with the content of all the scripts and styles with data-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:

Transform all generated pages after the build
Concat inline scripts
Concat loaded scripts from base url and get their content from file system
Concat loaded third-party scripts and fetch their content
Concat inline styles
Concat loaded stylesheets from base url and get their content from file system
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.js config:

const pluginConcat = require("@silexlabs/eleventy-plugin-concat")

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginConcat, {
    baseUrl: 'http://localhost:8080',
  })
}

Use the global data-concat attribute 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 scriptdata-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 linkdata-concat, head styledata-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'