Laravel Elixir with Bootstrap SASS and Font Awesome

Warning - Old content ahead!

This page has been marked as a legacy post. This means it's quite old (from 2015) and probably out of date. Take it with a grain of salt!

This is my current Gulpfile for Laravel Elixir which is heavily influenced from this gist and the comments within it.

All I've done is added Font Awesome, set it compile all scripts in resources/javascripts which is where I keep my own Javascript code and added asset versioning.

// gulpfile.js
var paths = {
'jquery': './vendor/bower_components/jquery/',
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/',
'fontawesome': './vendor/bower_components/fontawesome/'
elixir(function(mix) {
	mix.sass('*', 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets', paths.fontawesome + 'scss']})
		.copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts/bootstrap')
		.copy(paths.fontawesome + 'fonts/**', 'public/fonts/fontawesome')
			paths.jquery + "dist/jquery.js",
			paths.bootstrap + "javascripts/bootstrap.js",
		], 'public/js/app.js', './')
// bower.json
  "name": "Laravel Application",
  "dependencies": {
    "bootstrap-sass-official": "~3.3.1",
    "fontawesome": "~4.3.0"
// .bowerrc
  "directory": "vendor/bower_components"

Make sure you have Bower installed globally

npm install -g bower

Install the bower packages

bower install

After that, you can run the gulp watch command which will copy Glyphicons and Font Awesome into public/fonts.

resources/assets/sass and resources/javascripts will be watched for changes and concatenated into public/css/app.css and public/js/app.js respectively.

Your resources/assets/sass/app.scss should include the following to look for the fonts in the correct place and import their stylesheets.

$icon-font-path: "/fonts/bootstrap/";
$fa-font-path:   "/fonts/fontawesome";
@import "bootstrap";
@import "font-awesome";

That's it! Note that I'm using Elixir's handy asset versioning, too. In your HTML layout you can use the elixir function.

	<link href="{{ elixir('css/app.css') }}" rel="stylesheet">
	<script src="{{ elixir('js/app.js') }}"></script>

Spread the word

Share this article

Like this content?

Check out some of the apps that I've built!


Command-line snippet manager for power users



Third party app for iOS.



GUI for the rsync command