https://github.com/stafyniaksacha/metalsmith-css-packer
CSS packer/minifier/optimizer for metalsmith
https://github.com/stafyniaksacha/metalsmith-css-packer
css css-optimizer metalsmith minify-css packer
Last synced: about 2 months ago
JSON representation
CSS packer/minifier/optimizer for metalsmith
- Host: GitHub
- URL: https://github.com/stafyniaksacha/metalsmith-css-packer
- Owner: stafyniaksacha
- License: apache-2.0
- Created: 2017-07-27T14:23:15.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T00:42:23.000Z (almost 3 years ago)
- Last Synced: 2024-04-15T08:11:18.345Z (over 1 year ago)
- Topics: css, css-optimizer, metalsmith, minify-css, packer
- Language: JavaScript
- Size: 65.4 KB
- Stars: 6
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# metalsmith-css-packer
> CSS packer/minifier/optimizer for metalsmith"
This plugin is a CSS optimizer: it will pass on generated HTML, look for styles/links tags (external, internal, inline) and bundle all stylesheets in one place.
You can chose to pack your stylesheets in one file, as this, packed stylesheets can be reused through multiple pages. Or you can directly insert packed stylesheets as inline style tag.
*If this plugin doesn't fit your needs, please don't hesitate to ask for feature requests.*
## Installation
```bash
npm install --save metalsmith-css-packer
```
## Usage
### Javascript API
The example bellow show the minimum code needed to pack your files.
```javascript
const metalsmith = require('metalsmith');
const cssPacker = require('metalsmith-css-packer');
metalsmith(__dirname)
.source('./src')
.use(cssPacker())
.build();
```
### Examples
Here is an example with generated HTML output file
#### HTML Input
```html
My awesome page !
body {
// make the Internet great again
background: pink;
}
```
#### HTML Output
```html
My awesome page !
```
> Here we can see, all script tags are packed/optimized in one file per media
### Exclude element from packing
To blacklist element from packing, simply add `data-packer="exclude"` attribute to elements you want to exclude
#### HTML Input
```html
My awesome page !
body {
// make the Internet great again
background: pink;
}
```
#### HTML Output
```html
My awesome page !
```
## Options reference
| name | default | description |
| --- | --- | --- |
| `inline` | `false` | if `true`, write packed content in a inline style tag instead of a local linked stylesheets |
| `siteRootPath` | `/` | Use if your site root path is not `/` |
| `outputPath` | `assets/stylesheets/` | Customize output location of packed stylesheets |
| `csso` | `true` | Enable/disable css optimizer |
| `cssoOptions` | `{}` | Options passed to [csso](https://www.npmjs.com/package/csso#minifysource-options) |
| `removeLocalSrc ` | `false` | If set to `true` local source files are not copied in build directory |
| `assetsSource ` | `source` from metalsmith config | Where to find your css files - this comes before the css file paths that are set in your .html file. If not set, it goes with default metalsmith source path `metalsmith._source`|
| `hashContent` | `false` | If set to `false`, output file name are a hash of all input style names. If set to `true`, output file names are a hash of the resulting style contents. Useful for serving stylesheets with an efficient cache policy. |
> hint: metalsmith-css-packer use debug