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 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'

Keywords

FAQs

What is @silexlabs/eleventy-plugin-concat?

Is @silexlabs/eleventy-plugin-concat popular?

Is @silexlabs/eleventy-plugin-concat well maintained?

Package last updated on 02 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@silexlabs/eleventy-plugin-concat

eleventy-plugin-concat

Links

Overview

Features

Example

Usage

Options

Keywords

Related posts

@silexlabs/eleventy-plugin-concat

eleventy-plugin-concat

Links

Overview

Features

Example

Usage

Options

Keywords

Related posts

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

Weekly Downloads Now Available in npm Package Search Results