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"
  }
}

For more context on this gist please see this post: Setting up Gulp, Bower, Bootstrap Sass, & FontAwesome

can you paste your /style.scss example? thanks

I have problems with this part:

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

these files are not coppied at all:

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

I I try to add this:
@import "../../../bower_components/fontawesome/scss/font-awesome.scss";
to main.scss top, it works nicely...

Am I doing something wrong?

// P.S. if some of you get could not find Sass executable, run gem install sass

Thanks!

I am also having a problem with the css part.

@huglester @MichelleDiamond Please Look at the Sass official document.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials

I'm having troubles with css task too.

I only have the @import 'bootstrap/mixins' line in my main sass file and when I run gulp css I'm getting this output:

[01:10:04] gulp-notify: [Error running Gulp] Error: source string:1: error: file to import not found or unreadable: "bootstrap/mixins"

@stevenjlho Is not a partial problem, the Bootstrap Sass package has all the files as partials and we are importing it right

My bad, I was using gulp-sass instead of gulp-ruby-sass

For some reason .pipe(autoprefixer(last 2 version)) does not work for me?

npm install gulp-autoprefixer --save-dev

I'm getting this error:
TypeError: Arguments to path.join must be strings at path.js:360:15 at Array.filter (native) at Object.exports.join (path.js:358:36)

@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 <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']);