# eleventy-plugin-concat Eleventy plugin to bundle your scripts and styles This plugin is contributed by [Internet 2000 web studio](https://internet2000.net/), it is used to create green websites with [Silex website builder](https://www.silex.me/) ## Links * [The plugin on npm](https://www.npmjs.com/package/@silexlabs/eleventy-plugin-concat) (`@silexlabs/eleventy-plugin-concat`) * [Github repo](https://github.com/silexlabs/eleventy-plugin-concat) ## Overview 1. Add the plugin to your `.eleventy.js` config 1. Add `data-concat` attribute to ` ``` Generated `_site/page.html`: ```html ``` Generated `_site/script.js`: ```js // ... content of site.js // ... content of page.js console.log('concat') ``` Generated `_site/style.css`: ```js /* ... content of site.css */ /* ... content of page.css */ body { background: blue; } ``` ### Usage 1. Install the plugin using npm: ```sh npm install @silexlabs/eleventy-plugin-concat ``` 2. Add the plugin to your `.eleventy.js` config: ```js 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](https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable) 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](https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable) 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](https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable) 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](https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable) 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' |