Set up Elixir with Laravel 5

First, make sure you have gulp installed.

npm install --global gulp

Then run npm install in order to install Elixir.

Next, install the dependencies you want via bower. I will be installing jquery and bootstrap. “cd” into your “resources” directory and run

bower install jquery
bower install bootstrap

You should now have a “bower_components” folder within your “resources” directory. Open up “gulpfile.js” located at your project’s root level. Edit that file to look like this:

elixir(function(mix) {
    mix.less('app.less');

    mix.scripts([
        '../bower_components/jquery/dist/jquery.min.js',
        '../bower_components/bootstrap/dist/js/bootstrap.min.js'
    ]);

});

For reference, if you want to add your own scripts and also combine your css files, do something like this:

elixir(function(mix) {
    // compile less into css (will put them in public/css by default)
    mix.less([
        'app.less',
        'mystyles.less'
    ]);

    // combine all scripts in the order listed (into /js/all.js by default)
    mix.scripts([
        '../../bower_components/jquery/dist/jquery.min.js',
        '../../bower_components/bootstrap/dist/js/bootstrap.min.js',
        'myscripts.js'
    ]);

    // combine all styles in the order listed into /css/all.css
    mix.styles([
        "app.css",
        "mystyles.css"
    ], 'public/css/all.css', 'public/css');
});

Leave a Reply

Your email address will not be published. Required fields are marked *