Overriding Laravel Elixir Configs

Laravel Elixir is fantastic for your Laravel projects and it comes with defaults that “just work” within a Laravel application. It works so well that I like to use it for managing all my asset processing even in apps that are not on Laravel.

As an example, I wanted to create a new WordPress theme and found a theme scaffolding system called underscores which comes with SASS files but not gulp. I decided this would be a good overview on how to setup Elixir to work with uncommon structures.

#Create your theme

From the underscores site you can quickly generate a new theme by filling out a few text fields:

This generates a download that looks like this:

As you can see, the “sass” and “js” directory are in the main directory and not in “assets” as Laravel does. Let’s install Elixir and change this so it works.

#Install Elixir

Installing Elixir is as easy as pulling in the npm module. I just copied and pasted the package.json file from the Elixir repo so I could be sure I had all the things I needed:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-webpack-official": "^1.0.2"
  }
}

Next, create a gulpfile.js by copying over the defaults. These will be adjusted:

const elixir = require('laravel-elixir');
 
elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

#Adjusting the Gulpfile and change the config

The gulpfile is looking for app.scss and an app.js that will be inside resources/assets/sass and resources/assets/js. Since we do not have these locations let’s adjust our file to point to the style.scss and replace webpack with the scripts method to concatenate and minify the js:

elixir((mix) => {
    mix.sass('style.scss')
       .scripts(['customizer.js', 'navigation.js', 'skip-link-focus-fix.js']);
});

Now, we need to tell Elixir where these are found. You can open elixir/src/config.js to see all the options and over-riding them is as simple as:

elixir.config.assetsPath = './';
elixir.config.publicPath = './';
elixir.config.css.outputFolder = './';
 
elixir((mix) => {
    mix.sass('style.scss')
       .scripts(['customizer.js', 'navigation.js', 'skip-link-focus-fix.js']);
});

With that all set it’ll look for the style.scss inside the “sass” folder and the JavaScript inside the “js” folder. By setting all the paths to the theme root it removes that default “resources/assets/” to the path.

Any other items inside the Elixir Config can be over-ridden like this and that you gives you a lot of flexibility for using it in any project you are working on.