Gulp, Bower, Bootstrap Sass, FontAwesome

bower.json

{
  "name": "project",
  "version": "0.0.0",
  "authors": [
    "Eric Barnes <me@example.org>"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "fontawesome": "~4.2.0",
    "bootstrap-sass-official": "~3.2.0"
  }
}

gulpfile.js

// Basic Gulp File
//
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass')
    autoprefix = require('gulp-autoprefixer')
    notify = require("gulp-notify")
    bower = require('gulp-bower');

var config = {
    sassPath: './resources/sass',
    bowerDir: './bower_components'
}

gulp.task('bower', function() {
    return bower()
        .pipe(gulp.dest(config.bowerDir))
});

gulp.task('icons', function() {
    return gulp.src(config.bowerDir + '/fontawesome/fonts/**.*')
        .pipe(gulp.dest('./public/fonts'));
});

gulp.task('css', function() {
    return gulp.src(config.sassPath + '/style.scss')
        .pipe(sass({
            style: 'compressed',
            loadPath: [
                './resources/sass',
                config.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
                config.bowerDir + '/fontawesome/scss',
            ]
        })
            .on("error", notify.onError(function (error) {
                return "Error: " + error.message;
            })))
        .pipe(autoprefix('last 2 version'))
        .pipe(gulp.dest('./public/css'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
    gulp.watch(config.sassPath + '/**/*.scss', ['css']);
});

gulp.task('default', ['bower', 'icons', 'css']);

package.json

{
  "devDependencies": {
    "gulp": "^3.8.8",
    "gulp-ruby-sass": "^0.7.1",
    "gulp-notify": "^1.6.0",
    "gulp-autoprefixer": "^1.0.0",
    "gulp-bower": "0.0.6"
  }
}

If you install the same versions of all the node modules as they are shown in the bower.js and package.json files you should not have to change anything.

Having a look at the demo repo helped me figure out a few things I was missing. So I would recommend having a look there to anyone who is having trouble getting this setup. https://github.com/ericbarnes/gulp-bower-bootstrap-fontawesome

works for me with new versions of modules:
bower.json:

{
  "name": "gulp-bower-bootstrap-fontawesome",
  "version": "0.0.0",
  "homepage": "https://github.com/ericbarnes/gulp-bower-bootstrap-fontawesome",
  "authors": [
    "Eric Barnes <eric@ericlbarnes.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap-sass-official": "~3.3.5",
    "fontawesome": "~4.4.0"
  }
}

gulpfile.js:

var gulp = require('gulp'),

    sass = require('gulp-ruby-sass')
,
    notify = require("gulp-notify")
,
    bower = require('gulp-bower');

var config = {

    sassPath: './resources/sass',

    bowerDir: './bower_components'

}

gulp.task('bower', function() {

     return bower()
 
        .pipe(gulp.dest(config.bowerDir))

}); 

gulp.task('icons', function() {

    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')

        .pipe(gulp.dest('./public/fonts'));

});

gulp.task('css', function() {

    // thx http://stackoverflow.com/questions/28140012
    return sass(config.sassPath + '/style.scss', {

            style: 'compressed',

            loadPath: [

                './resources/sass',

                config.bowerDir + '/bootstrap-sass/assets/stylesheets',

                config.bowerDir + '/font-awesome/scss',

            ]

        })
.on("error", notify.onError(function (error) {

                return "Error: " + error.message;

            }))


        .pipe(gulp.dest('./public/css'));

});

// Rerun the task when a file changes

gulp.task('watch', function() {

    gulp.watch(config.sassPath + '/**/*.scss', ['css']);

});



gulp.task('default', ['bower', 'icons', 'css']);

Using gist with "gulp-ruby-sass": "^2.0.3" raise:

Error in plugin 'gulp-ruby-sass'
Message: `source` does not match any files.

Posible reason for issue with gulp-ruby-sass > ^0.7.1 sindresorhus/gulp-ruby-sass#265

./source/scss/** does not work because it matches directories, and gulp-ruby-sass does not compile directory sources any more.

In my situation following works :

gulpfile.js

var gulp = require('gulp'),

    sass = require('gulp-ruby-sass')
,
    notify = require("gulp-notify")
,
    bower = require('gulp-bower');

var config = {

    sassPath: './app/static/sass',

    bowerDir: './bower_components'

}

gulp.task('bower', function() {

     return bower()
 
        .pipe(gulp.dest(config.bowerDir))

});

gulp.task('icons', function() {

    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')

        .pipe(gulp.dest('./app/static/fonts'));

});

gulp.task('css', function() {

    return sass('./app/static/scss/**/*.scss', { 

            style: 'compressed',

            loadPath: [

                './app/static/scss',

                config.bowerDir + '/bootstrap-sass/assets/stylesheets',

                config.bowerDir + '/font-awesome/scss',

            ]

        })
.on("error", notify.onError(function (error) {

                return "Error: " + error.message;

            }))


        .pipe(gulp.dest('./app/static/css'));

});


gulp.task('watch', function() {

    gulp.watch(config.sassPath + '/**/*.scss', ['css']);

});



gulp.task('default', ['bower', 'icons', 'css']);

How to configure javascripts? bootstrap and jquery

I found I was having to the gulp the directory each time I saved the .scss file. I figured out the watch task needs to be included in the last line, then the .scss file will compile automatically on save.

gulp.task('default', ['bower', 'icons', 'css', 'watch']);