@thelevicole/webpack-tidy-jigsaw-output v1.1.0
Tidy the Jigsaw generated output
This webpack plugin is run when the jigsawDone event.
Basic Usage
Install with npm:
npm i @thelevicole/webpack-tidy-jigsaw-output --save-devInclude the plugin in your webpack.mix.js file as follows:
const mix = require('laravel-mix');
const TidyJigsawOutput = require('@thelevicole/webpack-tidy-jigsaw-output');
require('laravel-mix-jigsaw');
...And then add the plugin to the webpack config:
...
mix.webpackConfig({
plugins: [
new TidyJigsawOutput()
]
});The full webpack.mix.js should look something like...
const mix = require('laravel-mix');
const TidyJigsawOutput = require('webpack-tidy-jigsaw-output');
require('laravel-mix-jigsaw');
mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build');
mix.jigsaw()
.js('source/_assets/js/main.js', 'js')
.sass('source/_assets/sass/main.scss', 'css')
.options({
processCssUrls: false,
})
.version();
mix.webpackConfig({
plugins: [
new TidyJigsawOutput({
verbose: true
})
]
});Options
The below options can be passed to the plugin.
| Key | Description | Default |
|---|---|---|
rules | This is an object of rules to be used by pretty. | { ocd: true } |
env | Set a specific build environment for dynamically guessing the output directories. By default uses the parameter sent to webpack e.g. npm run production | local |
allowedEnvs | Accepts a string or array of environment names for which tidying should run. E.g. [ 'production', 'staging' ] will only tidy production and staging builds. | * |
verbose | Whether or not to print logs to the console. | false |
test | The regular expression used before modifying a file | /\.html$/ |
encoding | The file encoding used to read the input. | utf8 |
rules
This is an object of rules will be passed as is to pretty.
If empty, the default value is used: { ocd: true }.
Example usage
mix.webpackConfig({
plugins: [
new TidyJigsawOutput({
rules: {
ocd: true
}
})
]
});The above example will:
- condenses multiple newlines to a single newline
- trims leading and trailing whitespace
- ensures that a trailing newline is inserted
- normalizes whitespace before code comments
env
Set a specific build environment for dynamically guessing the output directories.
If empty, the env parameter parsed to node is used.
Example usage
mix.webpackConfig({
plugins: [
new TidyJigsawOutput({
env: 'production'
})
]
});The above example will only tidy the build output in the build_production directory.
allowedEnvs
Accepts a string or array of environment names for which tidying should run.
If empty, the default value is used: '*'
Example usage
mix.webpackConfig({
plugins: [
new TidyJigsawOutput({
allowedEnvs: ['production', 'staging']
})
]
});The above example will only run the tidying process when the build environment is either production or staging, local will not be tidied.
verbose
This option increases the amount of information you are given during the tidying process.
If empty, the default value is used: false
Example usage
mix.webpackConfig({
plugins: [
new TidyJigsawOutput({
verbose: true
})
]
});The above example will print a list of tidied files as and when they are processed, for example:
[TidyJigsawOutput] Tidying /Users/example/my-site/build_production/index.html[TidyJigsawOutput] Tidying /Users/example/my-site/build_production/about/index.html
test
The regular expression used before to check if a file should be tidied.
If empty, the default value is used: /\.html$/
Example usage
mix.webpackConfig({
plugins: [
new TidyJigsawOutput({
test: /about\/.*\.html$/
})
]
});The above example will only process .html files found in the about directory, for example:
/Users/example/my-site/build_production/about/index.html/Users/example/my-site/build_production/about/the-team/index.html
Please note that this full path is tested against the regex pattern, so the above example would tidy all html files if a directory outside of the project includes "about". E.g.
- /Users/about/my-site/build_production/index.html
- /Users/example/project-about/build_production/index.html
encoding
If for some reason you need to set the file encoding used to read the input source, use this option. The allowed values are determined by node.js, a good thread about supported encodings can be found here: https://stackoverflow.com/a/14551669/3804924
If empty, the default value is used: 'utf8'
Example usage
mix.webpackConfig({
plugins: [
new TidyJigsawOutput({
encoding: 'latin1'
})
]
});5 years ago