Setting up Laravel Elixr with Bootstrap

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.

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.

Here is our first problem. This installed to the default bower_components directory. We could in theory change this by creating a .bowerrc. But I’m just going to leave it here and move the files programatically.

Bootstrap SASS

When I start a new Bootstrap project my workflow is to create my own base file which @imports everything I need. Then I duplicate out the _variables.scss so I have complete customization.

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': './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 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 gulp provides a way with its “src” option. Let me show you the task:

gulp.task('copybootstrap', function() {
    gulp.src(paths.bootstrap + '**/bootstrap.js')
        .pipe(gulp.dest('./resources/assets'));
    gulp.src(paths.bootstrap + '**/*.{ttf,woff,eof,svg}')
        .pipe(gulp.dest('./public'));
});

This copybootstrap task first takes the primary bootstrap.js file and moves it to resources/assets, and then moves fonts to public. The reason I move the JavaScript to resources is so that it will be easier to concatenate and compress with any of my future JavaScript.

Final Gulp Task

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

elixir(function(mix) {
    mix.sass("style.scss", 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
       .version(["css/style.css", "js/all.js"])
       .scripts('', 'resources/assets/javascripts')
       .routes()
       .events()
       .phpUnit();
});

This builds our sass, combines all our scripts, and finally puts it in the public directory ready for us to use.

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

Setting up Laravel Elixr with Bootstrap is a post from Laravel News.