gulpfile.js

const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const gif = require('gulp-if');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const livereload = require('gulp-livereload');

let local;
try {
  local = require('./gulpfile.local.js');
} catch (e) {
  local = {};
}

const dev = process.env.NODE_ENV !== 'production';
const settings = Object.assign({
  sass: {
    files: [
      './client/**/*.scss'
    ],
    includePaths: [
      './',
      './node_modules/materialize-css/sass',
      './node_modules/vulcanval/src/scss'
    ],
    output: './public/css',
  }
}, local);
const postcssList = [
  autoprefixer({browsers: [
    'last 10 version',
    '> 5%'
  ]})
];

if (!dev) {
  postcssList.push(cssnano({
     safe: true
  }));
}

gulp.task('sass', function () {
  return gulp.
    src(settings.sass.files).
    pipe(
      gif(dev, sourcemaps.init())
    ).
    pipe(
      sass({
        includePaths: settings.sass.includePaths,
        outputStyle: dev ? 'nested' : 'compressed',
        sourceMap: dev,
        sourceComments: dev,
        sourceMapEmbed: dev
      }).
      on('error', sass.logError)
    ).
    pipe(
      gif(dev, sourcemaps.write(undefined, { sourceRoot: null }))
    ).
    pipe(
      postcss(postcssList)
    ).
    pipe(
      rename({ dirname: '' })
    ).
    pipe(
      gulp.dest(settings.sass.output, { overwrite: true })
    ).
    pipe(
      gif(dev, livereload())
    );
});

gulp.task('watch', function () {
  if (dev) {
    livereload.listen();
    gulp.watch(settings.sass.files, ['sass']);
  }
});

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