@silexlabs/eleventy-plugin-concat
Advanced tools
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
@silexlabs/eleventy-plugin-concat).eleventy.js configdata-concat attribute to <script>, <script src=, <style> and <link rel="stylesheet" href= which are in the page <head>script.js and style.css files with the content of all the scripts and styles with data-concatTip: this plugin works great with eleventy-plugin-helmet which makes it easy to group scripts of templates in HEAD
This is the roadmap and feature list:
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; }
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
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' |
FAQs
Eleventy plugin to bundle your scripts and styles
The npm package @silexlabs/eleventy-plugin-concat receives a total of 240 weekly downloads. As such, @silexlabs/eleventy-plugin-concat popularity was classified as not popular.
We found that @silexlabs/eleventy-plugin-concat demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
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.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.