Laravel Elixir with Bootstrap SASS and Font Awesome

Posted on Apr 12, 2015

Laravel Laravel Elixir Bootstrap Font Awesome SASS

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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')
		.scripts([
			paths.jquery + "dist/jquery.js",
			paths.bootstrap + "javascripts/bootstrap.js",
			'./resources/javascripts/**/*.js',
		], 'public/js/app.js', './')
		.version([
			'css/app.css',
			'js/app.js'
		])
});
1
2
3
4
5
6
7
8
// bower.json
{
  "name": "Laravel Application",
  "dependencies": {
    "bootstrap-sass-official": "~3.3.1",
    "fontawesome": "~4.3.0"
  }
}
1
2
3
4
// .bowerrc
{
  "directory": "vendor/bower_components"
}

Make sure you have Bower installed globally

1
npm install -g bower

Install the bower packages

1
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.

1
2
3
4
$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.

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

Like this article? Sign up to updates - no spam!