@joshmoreno/jigsaw
v0.1.4
Published
tightenco/jigsaw (php package) helper
Downloads
8
Readme
Introduction
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.
Quick Start
# 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/');
jigsaw.watch();
Api
Browsersync
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,
}
Return
Returns new browser-sync-webpack-plugin
instance.
Example Usage
See quick start for example usage.
Jigsaw Build Watcher
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.
Example Usage
See quick start for example usage.
Node 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.