website_template/gulpfile.js

// Initiate npm-modules
var gulp            = require('gulp'),
    autoprefixer    = require('gulp-autoprefixer'),
    concat          = require('gulp-concat'),
    cssnano         = require('gulp-cssnano'),
    livereload      = require('gulp-livereload'),
    notify          = require('gulp-notify'),
    plumber         = require('gulp-plumber'),
    rename          = require('gulp-rename'),
    sass            = require('gulp-sass'),
    merge2          = require('merge2'),
    rimraf          = require('rimraf');

var Config = {
    inputDir: '_source/',
    outputDir: '_dist/'
}

var SassConfig = {
    inputDir:    '_source/sass/',
    outputDir:   '_dist/css/',
    options: {
        outputStyle:   'expanded'
    },
    autoprefixer:      ['last 2 version', 'IE 11', 'Firefox ESR', 'ios 10', 'android 4.4']
}

//:: Tasks

// delete the output folder
gulp.task('clean', function(cb) {
    return rimraf(Config.outputDir, cb)
});

// render SASS
gulp.task('sass', function() {
    var onError = function(err) {
        notify.onError({
            title:    'gulp',
            subtitle: 'Error!',
            message:  '❌  <%= error.message %>',
            sound:    'Submarine'
        })(err);
    this.emit('end');
    };

    return merge2(
        gulp.src([
            'node_modules/sanitize.css/sanitize.css'
        ]))
        .pipe(concat('addons.css'))
        .pipe(gulp.dest(SassConfig.outputDir))
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(SassConfig.outputDir)),

        gulp.src(SassConfig.inputDir + '*.scss')
        .pipe(concat('styles.css'))
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass(SassConfig.options).on('error', sass.logError))
        .pipe(autoprefixer(SassConfig.autoprefixer))
        .pipe(gulp.dest(SassConfig.outputDir))
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(SassConfig.outputDir))
        .pipe(livereload())
        .pipe(notify({
            title:      'gulp',
            subtitle:   'Success!',
            message:    '✅  SASS compiled',
            timeout:    '2'
        }));
});

gulp.task('sass-only', function() {
    return gulp
        .src(SassConfig.inputDir + '*.scss')
        .pipe(sass(SassConfig.options).on('error', sass.logError))
        .pipe(gulp.dest(SassConfig.outputDir));
});

// Copy those other files
gulp.task('copy', function() {
    gulp.src([Config.inputDir + '*.*'])
        .pipe(gulp.dest(Config.outputDir))
        .pipe(livereload())
    gulp.src([Config.inputDir + 'inc/**/*'])
        .pipe(gulp.dest(Config.outputDir + '/inc'))
        .pipe(livereload())
})

gulp.task('watch', function() {
    livereload.listen()

    // Watch .scss files
    gulp.watch(SassConfig.inputDir + '*.scss', ['sass']);
    // Watch php files
    gulp.watch(Config.inputDir + '*.php', ['copy'])
    gulp.watch(Config.inputDir + 'inc/*.php', ['copy']);
});

// Default: First 'clean', then the rest
gulp.task('default', ['clean'], function() {
    gulp.start('sass', 'copy');
});