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.

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
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

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
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Multi-tenant Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Supercharge Your SaaS Development with FilamentFlow: The Ultimate Laravel Filament Boilerplate logo

Supercharge Your SaaS Development with FilamentFlow: The Ultimate Laravel Filament Boilerplate

Build your SaaS application in hours. Out-of-the-box multi-tenancy and seamless Stripe integration. Supports subscriptions and one-time purchases, allowing you to focus on building and creating without repetitive setup tasks.

Supercharge Your SaaS Development with FilamentFlow: The Ultimate Laravel Filament Boilerplate
Rector logo

Rector

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

Rector
MongoDB logo

MongoDB

Enhance your PHP applications with the powerful integration of MongoDB and Laravel, empowering developers to build applications with ease and efficiency. Support transactional, search, analytics and mobile use cases while using the familiar Eloquent APIs. Discover how MongoDB's flexible, modern database can transform your Laravel applications.

MongoDB

The latest

View all →
Asymmetric Property Visibility in PHP 8.4 image

Asymmetric Property Visibility in PHP 8.4

Read article
Access Laravel Pulse Data as a JSON API image

Access Laravel Pulse Data as a JSON API

Read article
Laravel Forge adds Statamic Integration image

Laravel Forge adds Statamic Integration

Read article
Transform Data into Type-safe DTOs with this PHP Package image

Transform Data into Type-safe DTOs with this PHP Package

Read article
PHPxWorld - The resurgence of PHP meet-ups with Chris Morrell image

PHPxWorld - The resurgence of PHP meet-ups with Chris Morrell

Read article
Herd Executable Support and Pest 3 Mutation Testing in PhpStorm 2024.3 image

Herd Executable Support and Pest 3 Mutation Testing in PhpStorm 2024.3

Read article