Vapor + Gulp + BrowserSync

.babelrc

{
  "presets": ["es2015"]
}

gulpfile.babel.js

'use strict';

const config = {
  paths: {
    styles: {
      in: './Assets/Styles/*.scss',
      out: './Public/styles/',
      watch: './Assets/Styles/**/*.scss'
    },
    images: {
      in: './Assets/Images/**/*{jpg,png,svg,gif}',
      out: './Public/images/'
    },
    source: './Sources/**/*'
  },
  retina_suffix: '_2x',
  vapor_address: 'localhost:5000',
};

import gulp from 'gulp';
import gif from 'gulp-if';
import newer from 'gulp-newer';

import unretina from 'gulp-unretina';
import sass from 'gulp-sass';
import imagemin from 'gulp-imagemin';
import postcss from 'gulp-postcss';
import cleancss from 'gulp-clean-css';
import sourcemaps from 'gulp-sourcemaps';
import browserSync from 'browser-sync';

import autoprefixer from 'autoprefixer';
import svgInline from 'postcss-inline-svg';

import vapor from 'gulp-vapor';

vapor.config.commands.build = 'vapor build --verbose --mysql'
const isProduction = process.env.NODE_ENV === 'production' || false;

function retina_path(path) {
  const components = path.split('.');
  return `${components[0]}_2x.${components[1]}`
}

function unretina_path(path) {
  const components = path.split(config.retina_suffix);
  return `${components[0]}${components[1]}`;
}

gulp.task('styles', () => {
  gulp.src(config.paths.styles.in)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: ['node_modules/normalize.css']
    }))
    .pipe(postcss([autoprefixer(), svgInline()]))
    .pipe(gif(isProduction, cleancss({compatibility: 'ie8'})))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.paths.styles.out))
    .pipe(gif(!isProduction, browserSync.stream()));
});

gulp.task('images:copy', () => {
  gulp.src([config.paths.images.in, `!*${config.retina_suffix}.{jpg,png,gif,svg}`])
      .pipe(gif(!isProduction, newer({dest: config.paths.images.out})))
      .pipe(gif(isProduction, imagemin()))
      .pipe(gulp.dest(config.paths.images.out))
      .pipe(gif(!isProduction, browserSync.stream()))
});

gulp.task('images:unretina', () => {
  gulp.src([config.paths.images.in, `*${config.retina_suffix}.{jpg,png,gif,svg}`])
    .pipe(gif(!isProduction, newer({
      dest: config.paths.images.out,
      map: unretina_path
    })))
    .pipe(unretina({suffix: config.retina_suffix}))
    .pipe(gif(isProduction, imagemin()))
    .pipe(gulp.dest(config.paths.images.out))
    .pipe(gif(!isProduction, browserSync.stream()))
});

gulp.task('images', ['images:copy', 'images:unretina']);

gulp.task('vapor:build', vapor.build);
gulp.task('vapor:reload', () => {
  vapor.reload(() => {
    setTimeout(() => {
      browserSync.reload();
    }, 2000);
  });
});

gulp.task('watch', () => {
  vapor.start(() => {
    browserSync.init({
      proxy: config.vapor_address,
      open: false
    });
  });

  gulp.watch(config.paths.styles.watch, ['styles']);
  gulp.watch(config.paths.images.in, ['images']);
  gulp.watch(config.paths.source, ['vapor:reload']);
});

gulp.task('build', ['styles', 'images', 'vapor:build']);

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

package.json

{
  "name": "vaporgulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "gulp",
    "build": "gulp build",
    "production": "NODE_ENV='production' npm run build"
  },
  "author": "Kristian Andersen",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.23.1",
    "babel-preset-es2015": "^6.22.0",
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.0.3",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-newer": "^1.3.0",
    "gulp-postcss": "^6.3.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-unretina": "^0.1.3",
    "gulp-vapor": "^1.1.0",
    "normalize.css": "^5.0.0",
    "postcss-inline-svg": "^2.3.0"
  }