Cacher is the code snippet organizer for pro developers

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']);
});

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

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

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

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');
});

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,
  });
});

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']);