Gists for http://fixate.it/blog/structuring-your-gulp-workflow/

A.markdown

Gists for Structuring Your Gulp Workflow on Fixate's blog.

browserSync.js

const gulp = require('gulp');

const conf = require('../gulpconfig');

gulp.task('browser-sync', function() {
  return global.browserSync.init({
    server: {
      baseDir: conf.path.src.base,
    },
    injectchanges: true,
  });
});

css.js

const gulp         = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const sass         = require('gulp-sass');

const conf = require('../gulpconfig');

gulp.task('css', function() {
  return gulp.src([conf.path.src.scss + '/**/*.{scss,sass}'])
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest(conf.path.dest.css));
});

gulp.task('css:watch', ['css'], function() {
  return global.browserSync.reload('*.css');
});

gulp-directory-structure.sh

├── [project src / built files / other configs etc.]
├── ...
├── gulp
│   ├── tasks
│   │   ├── browserSync.js
│   │   ├── css.js
│   │   └── watch.js
│   └── gulpconfig.js
├── Gulpfile.js
├── ...
└── package.json

gulpconfig.js

var src = 'src';
var dest = 'built';

module.exports = {
  path: {
    src: {
      base: src,
      scss: src + '/scss',
    },
    dest: {
      base: dest,
      css: dest + '/css',
    },
  },
};

Gulpfile.js

const gulp        = require('gulp');
const requireDir  = require('require-dir');
const browserSync = require('browser-sync').create();

global.browserSync = browserSync;

requireDir('./gulp/tasks', {recurse: false});

gulp.task('default', ['watch']);

watch.js

const gulp  = require('gulp');
const watch = require('gulp-watch');

const conf = require('../gulpconfig');

gulp.task('watch', ['css', 'browser-sync'], function() {
  gulp.watch(conf.path.src.scss + '/**/*.scss', ['css:watch']);
});