You could drop Laravel Mix into the project. It’s an “elegant wrapper” for Webpack. I’ve done this for a number of non-Sage themes I’ve inherited — one of which I’ve recently built a React component for. Also, this is what Sage will eventually be moving to for its own frontend workflow (roots/sage#2011).
I usually set the names of the scripts (in package.json
) to follow Sage’s naming (since yarn start
feels so much better than yarn dev
):
"scripts": {
"build": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"start": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
Then I believe if you were using the build-before
hook in Trellis to for deploying the assets, for the most part, you wouldn’t need to change much. When configuring Mix (which is super easy), make sure the built assets are being written to the dist
directory. I’m assuming the theme you are working with wouldn’t include any Composer dependencies, so you could leave out that task.
If you are interested, here is a quick dump of what I’ve done when in a similar situation:
package.json
{
"devDependencies": {
"laravel-mix": "^2.1.11"
},
"scripts": {
"build": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"start": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
}
Laravel Mix Configuration
This may or may not work — had to adapt it for the sake of this example. It gives you the general idea anyway.
// webpack.mix.js
let mix = require('laravel-mix');
mix.setPublicPath('./dist')
.copyDirectory('src/images', 'dist/images')
.js('src/scripts/main.js', 'dist/scripts/') // Main script
.sass('src/styles/main.scss', 'dist/styles/') // Main stylesheet
.version(); // See functions.php for automatic versioning function
if (!mix.inProduction()) {
mix.browserSync('example.test');
}
Asset Versioning Helper
A modest recreation of the asset_path()
function in Sage. Again, had to adapt somethings for the sake of example — so I wasn’t able to test it.
// functions.php — or wherever
/**
* Versioned Asset Helper
*
* Grabs the latest verion from the Mix Manifest
*
* Inspired by Sage
*/
function asset_path($asset)
{
$manifest = get_stylesheet_directory() . '/dist/mix-manifest.json';
return get_stylesheet_directory_uri() . '/dist' . json_decode(file_get_contents($manifest), true)['/' . $asset];
}
/**
* Enqueue scripts and styles.
*/
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('not-sage-style', asset_path('styles/main.css'), false, null);
wp_enqueue_script('not-sage-script', asset_path('scripts/main.js'), false, null, true);
}, 100);