website_template/gulpfile.js

'use strict';

//------------------------
//:: Initiate npm-modules

const   gulp            = require('gulp'),
        sass            = require('gulp-sass')(require('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');


//------------------------
//:: Config parameter

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

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


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

// compile scss
function scss_addons() {
    var onError = function(err) {
        notify.onError({
            "title":      "scss_addons",
            "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(postcss([autoprefixer()]))
    .pipe(gulp.dest(SassConfig.outputDir))
    .pipe(postcss([cssnano()]))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(SassConfig.outputDir))
    .pipe(livereload())
    .pipe(notify({
        "title":      "scss_addons",
        "subtitle":   "Success!",
        "message":    "✅  SCSS compiled",
        "timeout":    "2"
    }));
}

function scss_main() {
    var onError = function(err) {
        notify.onError({
            "title":      "scss_main",
            "subtitle":   "Error!",
            "message":    "❌  <%= error.message %>",
            "sound":      "Submarine"
        })(err);
    this.emit('end');
    };

    return gulp
    .src(SassConfig.inputDir + '*.scss')
    .pipe(concat('styles.css'))
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass(SassConfig.options).on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest(SassConfig.outputDir))
    .pipe(postcss([cssnano()]))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(SassConfig.outputDir))
    .pipe(livereload())
    .pipe(notify({
        "title":      "scss_main",
        "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_main);
    gulp.watch(Config.inputDir + '*.html', copy);
};

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


//------------------------
//:: Define tasks

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

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