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.


Filed in: Laravel


Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Laravel + Vue.JS developer
Remote or in Toronto Canada
Star Dot Hosting Inc
Full Stack or Back-End Developer
Alexandria, VA; Tallahassee, FL; Orlando, FL
Marketing for Change
Senior Quality Assurance Engineer
Remote
Bisnow Media
Senior PHP/Laravel Developer: Your Dream Work Environment
Remote
iPhone Photography School
Senior Software Engineer
Remote or San Francisco
Curology
Laravel Developer
Las Vegas, NV
V Shred
R&D Developer
Denver, CO
booj