Laravel Elixir With Bootstrap Sass

.bowerrc

{
  "directory": "vendor/bower_components"
}

bower.json

{
  "name": "Laravel Application",
  "dependencies": {
    "bootstrap-sass-official": "~3.3.1"
  }
}

gulpfile.js

var elixir = require('laravel-elixir');

/*
 |----------------------------------------------------------------
 | Have a Drink!
 |----------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic
 | Gulp tasks for your Laravel application. Elixir supports
 | several common CSS, JavaScript and even testing tools!
 |
 */

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 gist is for the following tutorial: Setting up Laravel Elixir with Bootstrap

Also see the update on a simpler way of implementing all these tools:
Setup Bootstrap Sass with Laravel Elixir

For people whoever find this script not working as expected, you have to

1. add @import "bootstrap"; to the header of your style.scss file
2. update mix.scripts last line from ], './', 'public/js/app.js'); to ], 'public/js/app.js', './');

This is cool. Thanks!

scripts generated after following guangbochen but I get error of gulp-notify, error gone only after renaming style.scss to app.scss

@jtan1ph You need to run gulp on your local development environment and not inside your VM. The VM can't handle the notifications for you

Adding @Impot "bootstrap"; to my top of styles.scss gives:

[14:50:14] gulp-notify: [Laravel Elixir] Sass Compilation Failed!: file to import not found or unreadable: bootstrap
Current dir: /var/www/project/resources/assets/sass/

ok, this isn't good, too:
includePaths: [paths.bootstrap + 'stylesheets/'
have to be
includePaths: [paths.bootstrap + 'stylesheets'
so without the ending forthslash

Wow, this tutorial and code has all kinds of problems.

• Adding the --save flag will not work unless a bower.json file already exists. You can run bower init before that command to walk you through that.
• I would just import bootstrap directly in style.scss so that if your editor doesn't get upset at you if you have a linter.

@import '../../../vendor/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';

• The last two parameters of the scripts call are mixed around. This is what my gulpfile.js looks like as a result.

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */

var paths = {
    jquery: 'vendor/bower_components/jquery/',
    bootstrap: 'vendor/bower_components/bootstrap-sass-official/assets/'
}

elixir(function(mix) {
    mix.sass('style.scss', 'public/css/')
        .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
        .scripts([
            paths.jquery + 'dist/jquery.js',
            paths.bootstrap + 'javascripts/bootstrap.js'
        ], 'public/js/app.js', './');
});

I had all kinds of issues with this, some of it fixed by the above comment, but mainly my sass wasn't working at all.

According to the docs, calling mix.sass will assume a directory structure like this:

resources/assets/sass/

I couldn't override this by using ./path-to-bootstrap so I just made a sass directory with style.scss in in, moved bootstrap-sass-official to the resources/assets dir and pointed my import that way.

Hope that helps someone and saves them the couple of hours I wasted.

If you have pixel related bugs in bootstrap like input group elements not aligning well you may try passing a precision of 8 for proper sass calculation.

Just pass it via the options object as an attribute in the elixir sass function.

I am getting the following error when i run gulp, any help will be appreciated. I tried running it on my VM as well as my windows command line

$ gulp
[21:34:03] Using gulpfile /var/www/resource_manager/gulpfile.js
[21:34:03] Starting 'default'...
[21:34:03] Starting 'sass'...
[21:34:03] Running Sass: resources/assets/sass/style.sass
[21:34:04] 'sass' errored after 262 ms
[21:34:04] Error: libsass bindings not found in /var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-14/binding.node. Try reinstalling node-sass?
at Object.sass.getBinaryPath (/var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/lib/extensions.js:148:11)
at Object. (/var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:16:36)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/index.js:157:21)
at Module._compile (module.js:460:26)
Error running task sequence: { task: 'sass',
message: 'sass catch',
duration: 0.262067425,
hrDuration: [ 0, 262067425 ],
err: [Error: libsass bindings not found in /var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-14/binding.node. Try reinstalling node-sass?] }
[21:34:04] Finished 'default' after 277 ms

I published an update on this tutorial that greatly simplifies everything:
Setup Bootstrap Sass with Laravel Elixir

@ericbarnes Your new article about including bootstrap -sass is great! I just tried it, because my way of including front-end dependencies was... well.... shit :) However, I'm still curious if there is a way to implement font-awsome in a similar fashion (with npm). Or do I need to stick with bower?

after that installation ,how can i include bootstrap template into my application??