A helper module for the static site generator Jigsaw. This module does three things.

1. Configures the Browsersync webpack plugin for use with Jigsaw.
2. Provides an optimized watcher for rebuilding your Jigsaw site and reloading the browser as files change.
3. Exposes the Jigsaw composer command to node for a more fluid build experience.

# npm
npm install @joshmoreno/jigsaw

# yarn
yarn add @joshmoreno/jigsaw 

Add the following script to your package.json

"scripts": {
	"jigsaw": "jigsaw build production && npm run production"
}

Use the sample webpack.mix.js below.

webpack.mix.js

const mix = require('laravel-mix');
const jigsaw = require('@joshmoreno/jigsaw');

mix.disableSuccessNotifications();

if (mix.inProduction()) {
    mix.setPublicPath('build_production/assets/');
} else {
    mix.setPublicPath('source/assets/');
}

mix.webpackConfig(webpack => {
    return {
        plugins: [jigsaw.browserSync()]
    }
});

mix.js('source/_assets/js/main.js', 'js/')
    .sass('source/_assets/sass/main.scss', 'css/')
    .version();

jigsaw.watch();

jigsaw.browserSync(browserSyncOptions = {}, pluginOptions = {});

browserSyncOptions (object) Browsersync options to be merged with defaults.

Defaults

// const env = argv.e || argv.env || 'local';
// const port = argv.p || argv.port || 3000;
// const buildPath = 'build_' + env;

{
    port: port,
    server: {
        baseDir: buildPath
    },
    serveStatic: ['./source'],
    files: [
        buildPath + '/**/*.html',
        '**/*.css',
        '**/*.js',
    ],
} 

pluginOptions (object)browser-sync-webpack-plugin options to be merged with defaults.

Defaults

{
    injectCss: true,
    reload: false,
}

Returns new browser-sync-webpack-plugin instance.

See quick start for example usage.

jigsaw.watch(paths = ['source/**/*.md', 'source/**/*.php'])

paths (string | array of strings) Paths to files, dirs to be watched recursively, or glob patterns. See chokidar.watch docs for more info.

See quick start for example usage.

The jigsaw command will be available in node just as it is in the command line. It will first look for it locally in your vendor directory, then globally in your PATH.

All args get passed unmodified so it's really just an alias. You can see an example of it in the quick start section above.