Using Laravel Elixir With Symfony 3

So Symfony 3 has finally been launched. It is, of course, amazing and it deserves to have amazing tools run along side it. Because of this I decided to rethink my asset toolchain. My usual gulpfile.js seemed a bit dated and, to be honest, it was starting to make me sad.

After tons of research, experimenting, and frustration I decided not to reinvent the wheel. There is already an amazing tool available for this and it is maintained by a very active member of the Laravel community. Laravel’s Elixir does everything I want it to, and more, straight out of the box and getting it to work with Symfony 3 is super simple. The obvious solution to my problem was using Laravel Elixir with Symfony 3.

To get started ensure you have all the usual goodies like Node and Gulp installed. Once that is ready simply go to the root of your Symfony 3 app and run the following command (You can skip this step if you already have a package.json file):

1
npm init

After completing the interactive command line prompts you should now have a package.json file available.

We can now install Elixir with the following command:

1
npm install --save-dev laravel-elixir

This process does take a while, but that is really all it takes to get it installed.

Now that Elixir is installed we need to configure it. There are 3 config properties that we care about. They are publicPath, appPath, and assetsPath. publicPath specifies where the processed assets should be placed. appPath is the directory that will be monitored for changes along with all the asset diretories (they default to css, js, sass, less, fonts). assetsPath is the directory where all the unprocessed assets are located.

I ended up with the following default gulpfile.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Import Elixir.
var elixir = require('laravel-elixir');

// Configure Elixir.
config.publicPath = 'web';
config.appPath = 'src';
config.assetsPath = 'app/Resources/assets';

// Set up Elixir tasks.
elixir(function(mix) {
    // Elixir Tasks Here
});

That’s it! For more information on how to use Elixir check its documentation page.