@thelevicole/webpack-tidy-jigsaw-output

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-dev

Include 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'
        })
    ]
});