Skip to content

silexlabs/eleventy-plugin-concat

Repository files navigation

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

Overview

  1. Add the plugin to your .eleventy.js config
  2. Add data-concat attribute to <script>, <script src=, <style> and <link rel="stylesheet" href= which are in the page <head>
  3. 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
  4. 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

  1. Install the plugin using npm:

    npm install @silexlabs/eleventy-plugin-concat
  2. 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',
      })
    }
  3. 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'

About

Eleventy plugin to bundle your scripts and styles

Resources

License

Stars

Watchers

Forks

Packages

No packages published