Laravel Mix with Wordpress

Setting up Webpack or Gulp and configuring it from scratch, can be painful. Laravel Mix make it much easier. Mix isn't just for Laravel projects - it can be used pretty much for anything - Drupal, CraftCMS & of course Wordpress.

Last Updated: 10-April-2021

Install Mix with Wordpress

Navigate to to the root directory (or you can install it in the theme folder /wp-content/themes/THEMENAME/)

Run the following command

npm init -y
npm install laravel-mix --save-dev

Setup with Wordpress

Create the mix configuration file, if it's not there, create it by running the following command.

touch webpack.mix.js

My prefered setup is below - I use SASS/SCSS files but changing the function from SASS to LESS will allow you to compile LESS files

let mix = require('laravel-mix');
// your Wordpress theme name here
var themename = "website";
const themePath = 'wp-content/themes/' + themename + '';
const resources = themePath + '/src';
mix.setPublicPath(`${themePath}/assets`);

mix.sass(`${resources}/scss/app.scss`, `${themePath}/assets/css`).sourceMaps();
mix.js(`${resources}/js/app.js`, `${themePath}/assets/js`)

//mix.browserSync('https://mywebsite.test');

Example of my preferred directory structure is

/wp-content/themes/THEMENAME/assets - All compiled css & javascript
/wp-content/themes/THEMENAME/src - All source scss & javascript files

Wordpress Directory

Run Mix

Once your config file is setup to your liking - to compile your CSS & Javascript just enter one of the following command in your terminal

## On off running of the files
npx mix

## Watch command - await changes to the source files
npx mix watch

## production - compile all files and minify them
npx mix production

That is it

Wordpress with BrowserSync

To speed up your Wordpress development workflow, you can use BrowserSync. BrowserSync automatically monitors your files for changes and refreshes the files.

Below is the full laravel mix file above with some additional code for browserSync.

let mix = require('laravel-mix');
// your Wordpress theme name here
var themename = "website";
const themePath = 'wp-content/themes/' + themename + '';
const resources = themePath + '/src';
mix.setPublicPath(`${themePath}/assets`);

mix.sass(`${resources}/scss/app.scss`, `${themePath}/assets/css`).sourceMaps();
mix.js(`${resources}/js/app.js`, `${themePath}/assets/js`)

mix.browserSync({
    proxy: "https://mywebsite.test",
    files: [
        `${themePath}/**/*.php`,
        `${themePath}/**/*.js`,
        `${themePath}/**/*.css`,
    ]
});

Proxy is the name of your local development url.

The files array allows you to setup which files you can to "auto-reload", in this case we have set up to look in the theme directory for template files (php), javascript and css files.

BrowserSync has many other more advanced features which can be seen in theĀ BrowserSync documentation.

Once configured you just run Mix as normal

## On off running of the files
npx mix

## Watch command - await changes to the source files
npx mix watch


About Fraser Clark

I've been a professional developer for over 10 years. I've been consulting and developing websites & software for small businesses, multi-nationals & governments.

I'm an expert in WordPress, Drupal, Laravel & a whole host of other platforms.

More about Fraser | Get in touch