Setting up Laravel Elixir with Bootstrap

Please Note: This tutorial is designed around Laravel 5 and the beta version of Elixir. You can find a recent tutorial here: Setup Bootstrap Sass with Laravel Elixir

This tutorial will remain on the site for historical reasons but you should read the new one.

---

One exciting feature coming in Laravel 5 is the new Elixir package. At its core it is a wrapper around gulp to make dealing with assets easier.

For my first look at this new tool I decided a good use case would be to setup Bootstrap and get everything working just like you would in a real world scenario. If you are not familiar, bootstrap includes three main components. CSS, JavaScript, and custom fonts. So we need to account for all those in our setup.

#Installing Elixir

The first step is to install all the dependencies. I already had node on my machine and that is a requirement. To verify you have it you can run:

node -v

Next install gulp if you haven’t:

npm install --global gulp

Now you are ready to get started. By default when you clone Laravel 5 is already includes a package.json which is what npm uses. Think of like your composer.json for npm. Because this is already included all you need to do is run:

npm install

This will bring in Elixir and all its goodies.

#Installing Bootstrap

You can currently get Bootstrap in two flavors, Less or Sass. Ideally you would pick the one you are most comfortable with and in this guide I will be using sass.

Now there are a couple of ways to install Bootstrap. You can use npm, bower, or download a zip, extract it, and physically move it. I’ve decided to go with bower since it’s fairly easy.

npm install -g bower

At this point we need to setup our app for bower. It’s as simple as running bower init and answering the questions. Don’t worry if you don’t know the answer to any. Just hit continue.

After that completes create a new .bowerrc file and include the following:

{
  "directory": "vendor/bower_components"
}

This will put all bower components inside the vendor/ folder. Of course you can use any directory or even the default. I picked this place because it’s already ignored and I never plan to edit any of these files.

Finally it’s time to actually install Bootstrap. From terminal you can run bower search bootstrap-sass and a plethora of options will fill your screen.

The one that looks best to me is “bootstrap-sass-official”. We all want official packages right?

Now we install it:

bower install bootstrap-sass-official --save

Notice I put the –save flag so it will automatically save to the bower.json file.

#Bootstrap SASS

When I start a new Bootstrap project my workflow is to create my own base file which @imports everything I need.

The problem with this setup is the Elixir sass task doesn’t know how to find the import files from bower. Luckily this is an easy fix:

var paths = {
    'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
 
elixir(function(mix) {
    mix.sass("style.scss", 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});

Inside the mix.sass() it accepts three parameters. (src, output, options) The options is the key here and with node-sass, which is used under the hood, you can define your own includePaths directories.

Now when the task runs it knows to try and pull in @imports from your vendor/bower_components directory.

#Bootstrap JavaScript and Fonts

I am not planning on ever modifying these files so I just need to move them out of bower and into my project. There are a few ways of doing this but Elixir provides a way with its “copy” ingredient. Let me show you the task:

.copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')

All this does is take the a path and copies all the files to the designated location. In this case public/fonts.

Next is the JavaScript. Bootstrap requires jQuery and it includes it’s own set of files. The Elixir scripts ingredient will handle concatenating these for us. Here is the task:

.scripts([
    paths.jquery + "dist/jquery.js",
    paths.bootstrap + "javascripts/bootstrap.js"
], './', 'public/js/app.js');

All this does is first pull in jQuery, then bootstrap.js, and finally concatenate both into a public/js/app.js file.

#Final Gulp Task

Now with everything in place all we have left is the final elixir task:

var elixir = require('laravel-elixir');
 
var paths = {
    'jquery': './vendor/bower_components/jquery/',
    'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
 
elixir(function(mix) {
    mix.sass("style.scss", 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
        .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
        .scripts([
            paths.jquery + "dist/jquery.js",
            paths.bootstrap + "javascripts/bootstrap.js"
        ], './', 'public/js/app.js');
});

This builds our sass, copies the fonts, combines all our scripts, and finally puts it in the public directory ready for us to use. I’ve created a gist with the three primary files in case that’s easier for you to follow and copy and paste.

If you have any questions or comments about this setup please feel free to comment below.