Use Laravel Elixir’s Gulpfile for Multiple Websites

When starting from a fresh Laravel installation, it’s easy to get started using Elixir and your gulpfile to concatenate, minify, and move any custom CSS and Javascript code from Resources to Public. Just append the proper method like styles, sass, less, or scripts to your mix function and elixir handles all of the heavy lifting for you.

But what happens when your application takes the next step in its development cycle and expands into multiple websites? Maybe you’ve got multiple domains for the same functionality, one repository that handles a variety of different application logic, or even multiple front-end frameworks at work within the same app.

Never fear, this post is here to walk you through making your gulpfile extensible, readable, and resilient to change.

Before even getting to elixir’s mix function, let’s define some variables for two important aspects of the gulpfile: where your files come from, and where your files go to (the CSS or JS displayed to end users). First up, separate and define the files where you actually write the code

var inputFile = { 
  site1: {
    'css': [
      'vendor/foundation.scss',
      'site1customstyle.scss',
    ],
    'js': [
      'vendor/jquery.js',
      'app.js',
      'site2customjs.js',
    ]
  }, 
  site2: { 
        'css': [
      'vendor/foundation.scss',
      'site2customstyle.scss',
    ],
    'js': [
      'vendor/jquery.js',
      'app.js',
      'site2customjs.js',
    ]
  }
};

Next, follow the same setup for your output files that we’ll need to send to Laravel’s public directory.

var outputFile = { 
site1: { 
'css': 'public/css/site1.concat.css',
'js': 'public/js/site1.concat.js',
},
site2: { 
'css': 'public/css/site2.concat.css',
'js': 'public/js/site2.concat.js',
}
};

Finally, we’ll get to actually concatenating in the way basic Laravel projects do it, but now we’ll be passing through pre-defined variables instead of mixing every individual file.

elixir( function(mix) { 
  mix 
    .sass(inputFile.site1.css, outputFile.site1.css)
    .scripts(inputFile.site1.js, outputFile.site1.js);

  mix 
    .sass(inputFile.site2.css, outputFile.site2.css)
    .scripts(inputFile.site2.js, outputFile.site2.js);
)};

With this structure setup, you can now go back to running your regular gulp commands in the command line. In addition to creating a strong separation of logic between the two different groupings, you’ll now find it’s easier to add additional websites or subdomains to your repository in the future.