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.
1npm install gulp2npm install gulp-sass3npm install node-neat4npm install node-bourbon
Step 2 – Import Bourbon
Inside your main sass file (mine is style.scss) import the needed files:
1@import "bourbon";2@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:
1var gulp = require('gulp'), 2 sass = require('gulp-sass'), 3 neat = require('node-neat').includePaths; 4 5var paths = { 6 scss: './assets/sass/*.scss' 7}; 8 9gulp.task('styles', function () {10 return gulp.src(paths.scss)11 .pipe(sass({12 includePaths: ['styles'].concat(neat)13 }))14 .pipe(gulp.dest('./public/css'));15});1617gulp.task('default',function(){18 gulp.start('styles');19});
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: