'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;