Laravel / March 31, 2014

Using Bourbon & Neat with Gulp

I have been hearing great things about Gulp, Bourbon, and Neat so I decided to give all these a try on a project. After banging my head around for what felt like forever I decided to write a little post showing you how to integrate all of these together.

Step 1 – Install NPM Packages

Run the following commands to get all the packages you will need. I typically include the flag to store these in my package.json but that isn’t required.

npm install gulp
npm install gulp-sass
npm install node-neat
npm install node-bourbon

Step 2 – Import Bourbon

Inside your main sass file (mine is style.scss) import the needed files:

@import "bourbon";
@import "neat";

Please note you will not need to prefix these or put full paths.

Step 3 – Setup Gulp

Now you will need to create a Gulpfile.js and include the following:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    neat = require('node-neat').includePaths;

var paths = {
    scss: './assets/sass/*.scss'
};

gulp.task('styles', function () {
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: ['styles'].concat(neat)
        }))
        .pipe(gulp.dest('./public/css'));
});

gulp.task('default',function(){
    gulp.start('styles');
});

The includePaths both at the top and inside the styles task are the areas where I had the most trouble. I spent way to long searching for all this and wanted to share in case anyone else is looking to integrate these. Looking at it now it’s so simple but that’s the way these things go.

Please leave any feedback if you have a better method or if I’ve missed something totally obvious.