Gulp and Libsass starter. 1. npm install 2. bower install

bower.json

{
  "name": "Linux Foundation Bower Dependencies",
  "version": "0.0.1",
  "authors": [
    "Jeremy Caldwell <[email protected]>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "dependencies": {
    "susy": "~2.2.6",
    "compass-breakpoint": "breakpoint-sass#~2.6.1",
    "support-for": "~1.0.3"
  },
  "devDependencies": {
    "sass-toolkit": "~2.9.0"
  }
}

gulpfile.js

/**
*
* The packages we are using.
* Not using gulp-load-plugins as it is nice to see whats here.
*
**/
var gulp         = require('gulp');
var sass         = require('gulp-sass');
var sassGlob     = require('gulp-sass-glob');
var autoprefixer = require('gulp-autoprefixer');
var plumber      = require('gulp-plumber');
var browserSync  = require('browser-sync');
var livereload   = require('gulp-livereload');
var imagemin     = require('gulp-imagemin');
var pngquant     = require('imagemin-pngquant');

// Path.
path             = require('path');

/**
*
* Styles.
* - Compile.
* - Autoprefixer.
* - Catch errors (gulp-plumber).
*
**/
gulp.task('sass', function() {
  gulp.src('sass/**/*.{scss,sass}')
  .pipe(sassGlob())
  .pipe(sass({
    outputStyle: 'expanded',
    includePaths: [
      path.join(__dirname, 'bower_components/support-for/sass')
    ]
  }))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],
    cascade: false
  }))
  .pipe(plumber())
  .pipe(gulp.dest('css'))
  // .pipe(browserSync.stream())
  .pipe(livereload())
});

/**
*
* BrowserSync.io
* - Watch CSS and JS for changes
* - View project at: localhost:3000
*
**/
//gulp.task('browser-sync', ['sass'], function() {
//  browserSync.init({
//    proxy: 'd67-p53-prod-ol.local'
//  });
//  gulp.watch('./sass/**/*.{scss,sass}', ['sass'])
//  gulp.watch('js/**/*.js');
// });

/**
*
* Images
* - Compress them!
*
**/
gulp.task('images', function () {
  return gulp.src('images/*')
  .pipe(imagemin({
    progressive: true,
    svgoPlugins: [{removeViewBox: true}],
    use: [pngquant()]
  }))
  .pipe(gulp.dest('images'));
});

/**
*
* Default task.
* - Runs Sass, scripts, and images.
* - Prepares all files for deployment.
*
**/
gulp.task('default', ['sass', 'images']);

/**
*
* Watch task.
* - Runs Sass and scripts.
* - Watchs for file changes for sass and scripts.
* - Refreshes browser after files have been compiled.
*
**/
gulp.task(
  'watch', [
    'sass'
  ],
  function () {
    gulp.watch('./sass/**/*.{scss,sass}', ['sass'])
    gulp.watch('js/**/*.js');
    livereload.listen();
  }
);

package.json

{
  "name": "lf-gulp-dependencies",
  "version": "1.0.0",
  "description": "Linux Foundation Gulp Dependencies",
  "main": "gulpfile.js",
  "scripts": {
    "postinstall": "find node_modules/ -name '*.info' -type f -delete"
  },
  "author": "Jeremy Caldwell",
  "homepage": "http://www.eternalistic.net",
  "dependencies": {
    "browser-sync": "^2.10.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "~3.1.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-livereload": "^3.8.1",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.1.0",
    "gulp-sass-glob": "0.0.2",
    "imagemin-pngquant": "^4.2.0"
  }
}

styles.scss

//
// Base.
//

// Bower components.
//========================================//

// Susy.
// Your markup, your design, your opinions | Our math.
// http://susy.oddbird.net
@import "../bower_components/susy/sass/susy";

// Breakpoint.
// Really Simple Media Queries with Sass.
// + https://github.com/at-import/breakpoint
@import "../bower_components/compass-breakpoint/stylesheets/breakpoint";

// Toolkit.
// Progressive Enhancement? Simple. Responsive Web Design? Done. Design in
// Browser? Beautiful.
// + https://github.com/at-import/toolkit
@import "../bower_components/sass-toolkit/stylesheets/toolkit/_kickstart.scss";
@import "../bower_components/sass-toolkit/stylesheets/toolkit/_clearfix.scss";

// Font Awsome.
// The iconic font and CSS toolkit.
// + https://fortawesome.github.io/Font-Awesome/
@import "../fonts/font-awesome/scss/font-awesome.scss";

// Styling.
//========================================//

// Variables.
@import "base/_breakpoint.scss";
@import "base/_colors.scss";

// Typography.
@import "base/_fonts.scss";

// Utilities.
@import "utils/_functions.scss";
@import "utils/_mixins.scss";
@import "utils/_helpers.scss";

// Import components.
@import "components/*";