A helper module for the static site generator Jigsaw. This module does three things.
- Configures the Browsersync webpack plugin for use with Jigsaw.
- Provides an optimized watcher for rebuilding your Jigsaw site and reloading the browser as files change.
- 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.