Overriding Laravel Elixir Configs

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:

underscore-create

This generates a download that looks like this:

underscore-theme

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.


Filed in: Laravel Tutorials / Elixir


Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Software Engineer Lead (PHP)
Remote
CivicPlus, LLC
Full-time Senior Web Developer
Detroit, MI
Wayne State University
Senior Software Engineer
Sydney, Australia
FoodByUs
Full Stack Engineer
Remote or Medford, Oregon
Empire Medical
Laravel Developer (fulltime - Dutch only)
Netherlands
Qbixx | Webservices
Full Stack or Back-End Developer
Alexandria, VA; Tallahassee, FL; Orlando, FL
Marketing for Change
Senior Quality Assurance Engineer
Remote
Bisnow Media