Setting up Laravel Elixir with Bootstrap

Published on by

Setting up Laravel Elixir with Bootstrap image

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.

Eric L. Barnes photo

Eric is the creator of Laravel News and has been covering Laravel since 2012.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Forge
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
DocuWriter.ai logo

DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

DocuWriter.ai
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
Non-backed Enums in Database Queries and a withSchedule() bootstrap method in Laravel 11.1 image

Non-backed Enums in Database Queries and a withSchedule() bootstrap method in Laravel 11.1

Read article
Laravel Pint --bail Flag image

Laravel Pint --bail Flag

Read article
Laravel Herd for Windows is now released! image

Laravel Herd for Windows is now released!

Read article
The Laravel Worldwide Meetup is Today image

The Laravel Worldwide Meetup is Today

Read article
Cache Routes with Cloudflare in Laravel image

Cache Routes with Cloudflare in Laravel

Read article
Learn how to manage timezones in your Laravel Apps image

Learn how to manage timezones in your Laravel Apps

Read article