https://github.com/stafyniaksacha/metalsmith-js-packer
Javascript packer/minifier/uglifier for metalsmith
https://github.com/stafyniaksacha/metalsmith-js-packer
javascript metalsmith minifier packer uglify
Last synced: about 1 month ago
JSON representation
Javascript packer/minifier/uglifier for metalsmith
- Host: GitHub
- URL: https://github.com/stafyniaksacha/metalsmith-js-packer
- Owner: stafyniaksacha
- License: apache-2.0
- Created: 2017-07-27T10:49:35.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T19:16:22.000Z (about 2 years ago)
- Last Synced: 2024-04-25T15:44:17.587Z (about 1 year ago)
- Topics: javascript, metalsmith, minifier, packer, uglify
- Language: JavaScript
- Homepage:
- Size: 64.5 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# metalsmith-js-packer
> 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.*
## Installation
```bash
npm install --save metalsmith-js-packer
```
## Usage
### Javascript API
The example bellow show the minimum code needed to pack your files.
```javascript
const metalsmith = require('metalsmith');
const jsPacker = require('metalsmith-js-packer');
metalsmith(__dirname)
.source('./src')
.use(jsPacker())
.build();
```
### Examples
Here is an example with generated HTML output file
#### HTML Input
```html
My awesome page !
<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';
})();
</body>
</html>
```
#### HTML Output
```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
### Exclude script element from packing
#### HTML Input
```html
<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';
})();
</body>
</html>
```
#### HTML Output
```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';
})();
```
## Options reference
| 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](https://www.npmjs.com/package/uglify-js) |
> hint: metalsmith-js-packer use debug