I recently inherited a medium-sized Symfony application. The backend code was beautifully organized. The frontend … not so much.

I’m a big fan of Gulp and more recently have converted to Elixir, so that begged the question, could I use Elixir outside of Laravel to help me get the frontend assets under control? Happily the answer was yes. Let me show you how.

If you’ve used Elixir before, you’ll already have node.js and the Node Package Manage (npm) installed. To check try:

node -v

and

npm -v

If either don’t yield a version number, then there are good installation instructions at https://docs.npmjs.com/getting-started/installing-node

Assuming that you do have them installed, you’ll need to ensure that there are package.json and gulp.json files in the root of your project.

There’s an awful lot you can put into a package.json file and it’s explained very well in the relevant npm documentation. If you don’t already have one however, I recommend starting with a skeleton file and adding what you need incrementally. This makes debugging so much easier. So this is where I recommend starting:


{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^3.0.0"
  }
}

Elixir can then be installed by running:

npm install

This will add a node_modules folder to your project. You’ll probably want to exclude that from being added to your code repository, which you can do by adding it to your to your .gitignore file if you’re using modern version control.

Finally you’ll probably want to add or tweak your gulpfile.js. A standard Elixir version would look something like this:


var elixir = require('laravel-elixir');

elixir(function(mix) {
    // your mixes here
});

However, Elixir has some built-in defaults that may not suit your project. You can find these defined in the node_modules/laravel-elixir/Config.js file. Any of these can be changed before the call to elixir(). For example, the public root of my Symfony project is called “web” rather than “public” as in Laravel projects. In this case we can override the default by inserting a single line:


var elixir = require('laravel-elixir');

elixir.config.publicPath = 'web';

elixir(function(mix) {
    // your mixes here
});

Config overrides and your mixes will depend on the specific needs of your project. So from here you’re on your own, but don’t forget that the Laravel documentation is a great source of help and inspiration for the many types of mix supported by Elixir.