Javascript packer/minifier/uglifier for metalsmith"
This plugin is a Javascript optimizer: it will pass on generated HTML, look for scripts tags (external, internal, inline) and bundle all script in one place.
You can chose to pack your script in one file, as this, packed script can be reused through multiple pages. Or you can directly insert packed script as inline script.
If this plugin doesn't fit your needs, please don't hesitate to ask for feature requests.
npm install --save metalsmith-js-packerThe example bellow show the minimum code needed to pack your files.
const metalsmith = require('metalsmith');
const jsPacker = require('metalsmith-js-packer');
metalsmith(__dirname)
.source('./src')
.use(jsPacker())
.build();Here is an example with generated HTML output file
<html>
<head>
<title>My awesome page !</title>
<script src="//cdn.example.com/jquery.min.js">
<script src="//cdn.example.com/jquery-plugin.min.js">
</head>
<body>
<!-- Imagine we have an awesome website here -->
<script>
var globalVariable = 'registered here';
(function() {
var contextedVariable = 'registered here';
})();
</script>
<script src="/assets/javascript/application.js">
</body>
</html><html>
<head>
<title>My awesome page !</title>
</head>
<body>
<!-- Imagine we have an awesome website here -->
<script src="/assets/javascript/e6791aa54bf763f10700a88b38d578282663be53.min.js">
</body>
</html>Here we can see, all script tags are packed/uglified in one file,
which is included and writed on filesystem
<html>
<head>
<title>My awesome page !</title>
<script src="//cdn.example.com/jquery.min.js">
<script src="//cdn.example.com/jquery-plugin.min.js">
</head>
<body>
<!-- Imagine we have an awesome website here -->
<script data-packer="exclude">
var globalVariable = 'registered here';
(function() {
var contextedVariable = 'registered here';
})();
</script>
<script src="/assets/javascript/application.js">
</body>
</html><html>
<head>
<title>My awesome page !</title>
</head>
<body>
<!-- Imagine we have an awesome website here -->
<script>
var globalVariable = 'registered here';
(function() {
var contextedVariable = 'registered here';
})();
</script>
<!-- notice that hash has changed, and another file is created -->
<script src="/assets/javascript/0cex1a4bquf764r4ge1relmb3v2ba3s8o6k3wetj.min.js" />
</body>
</html>| name | default | description |
|---|---|---|
inline |
false |
if true, write packed content in a inline script tag instead of a local script |
siteRootPath |
/ |
Use if your site root path is not / |
ouputPath |
assets/javascript/ |
Customize output location of packed script |
uglify |
true |
Enable/disable script uglify |
uglifyOptions |
{} |
Options passed to uglify |
hint: metalsmith-js-packer use debug