Setup Bootstrap Sass with Laravel Elixir

Laravel Elixir is a fantastic package that simplifies working with Gulp. For the unfamiliar Gulp is a JavaScript task runner that allows you to automate tasks. It can be used for compiling CSS, concating and minifying JavaScript, and much more.

Gulp was designed to be faster than previous build tools by utilizing node streams and has become one of the go to build systems. Laravel Elixir is a wrapper around Gulp making the setup a breeze.

In this tutorial let’s take a look at how to setup Bootstrap Sass with Elixir in a default Laravel 5.1 install.

Installing NPM Dependencies

Both Bootstrap and Elixir are node packages that are available via NPM, node package manager. If you open up the default package.json file you will see a list of dependencies:

How this works is first we import the Lato font from Google. Next, we override Bootstrap’s existing variable for font-family. This works because Bootstrap uses the Saas !default. Here is how they describe it:

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

Including Bootstrap JavaScript with Browserify

For including the Bootstrap JavaScript we have a few options. We could use their CDN, download it manually, or use a system called Browserify.

Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.

Because we already have Bootstrap installed through NPM we can utilize browserify and pull these into our app.js file. First, we do need to install jQuery and let’s do it through NPM by running the following command:

npm install jquery --save

Now, create the following file: resources/assets/js/app.js and add the following code:

Bootstrap expects jQuery to be global and with the first line we are including jQuery and assigning it to the window. The second line is requiring Bootstrap JavaScript. The last section is just a jQuery on ready and logging out the bootstrap tooltip version. This is used to just confirm it’s loading as we expect.

The simplicity of this shows just how great Elixir is. By just adding .browserify('app.js') everything is handled automatically. After saving run gulp again and this will be compiled into public/js/app.js

If you include this in your layout and load the site in a browser you should see 3.3.5 showing in the console.

Going further

This tutorial just barely touches the surface on everything Elixir can do. Check the official docs for more information and be sure and check out the Laravel Elixir category for more tutorials and resources.