website_template/gulpfile.js

'use strict'

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

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

var SassConfig = {
    inputDir:    '_source/scss/',
    outputDir:   '_dist/css/',
    options: {
        outputStyle:   'expanded'
    }
}

var postcss_plugins = [
    cssnano,
    autoprefixer
];

//----------------
//:: Tasks

// compile scss
function scss() {
    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(postcss(postcss_plugins))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(SassConfig.outputDir)),

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

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

// watch for changes
function watch() {
    livereload.listen();
    gulp.watch(SassConfig.inputDir + '*.scss', scss);
    gulp.watch(Config.inputDir + '*.html', copy);
};

// delete everything in _dist
function cleanup(cb) {
    return rimraf(Config.outputDir + '*', cb)
};

//----------------
//:: Export tasks

// complex tasks
const build = gulp.series(cleanup, gulp.parallel(copy, scss));

// export tasks
exports.scss = scss;
exports.copy = copy;
exports.watch = watch;
exports.cleanup = cleanup;
exports.build = build;
exports.default = build;