Gulp, Bower, Bootstrap Sass, FontAwesome

bower.json

{
  "name": "project",
  "version": "0.0.0",
  "authors": [
    "Eric Barnes <[email protected]>"
  ],
  "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"
  }
}

@ziplizard I got the the same error
http://stackoverflow.com/questions/28140012/gulp-typeerror-arguments-to-path-join-must-be-strings
we need to use gulp-ruby-sass() instead of gulp.src() to compile your Sass from a file or directory?
but I don't know how to deal with the "loadPath" part.

You need remove the gulp.src() as show in new documentation.

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('sass', function() {
    return sass('source/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('result'));
});

I'm having trouble with the error notification using gulp-notify. Anyone has the same issue?

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 <[email protected]>"
  ],
  "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']);