gulpfile.js.example

const gulp          = require('gulp');
const sass          = require('gulp-sass')(require('node-sass'));
const uglify        = require('gulp-uglify');
const include       = require('gulp-include');
const cleanCSS      = require('gulp-clean-css');
const sourcemaps    = require('gulp-sourcemaps');
const browserSync   = require("browser-sync").create();
const postcss       = require('gulp-postcss');
const autoprefixer  = require('autoprefixer');


const themePath     = 'theme/';
const distPath      = 'public/theme/';

// browser sync proxy url: e.g. a vhost-based url,
// see also: https://www.browsersync.io/docs/options#option-proxy
const bsProxy       = 'nutshell.localhost';

const paths = {
    src: {
        styles:     themePath + 'scss/default.scss',
        scripts:    themePath + 'js/**/*.js',
        images:     themePath + 'img/**/*',
        fonts:      themePath + 'fonts/**/*'
    },
    dist: {
        styles:     distPath + 'css',
        scripts:    distPath + 'js',
        images:     distPath + 'img',
        fonts:      distPath + 'fonts'
    },
    watch: {
        styles:     themePath + 'scss/**/*.scss',
        scripts:    themePath + 'js/**/*.js',
        images:     themePath + 'img/**/*',
        templates:  'templates/**/*'
    },
};

// reading your sass files, add autoprefixer options, create sourcemaps, generate css file, inject css via browser-sync
const styles = function() {
    return gulp.src(paths.src.styles)
        .pipe(sourcemaps.init())
        .pipe(sass())
         .pipe(postcss([
          autoprefixer({cascade: false})
        ]))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest(paths.dist.styles))
        .pipe(browserSync.stream({ match: '**/*.css' }));
};
exports.styles = styles;

// nearly the same that ['styles'] does, but minify css via cleanCSS
const minifyCss = function() {
    return gulp.src(paths.src.styles)
        .pipe(sass())
         .pipe(postcss([
          autoprefixer({cascade: false})
        ]))
        .pipe(cleanCSS())
        .pipe(gulp.dest(paths.dist.styles));
};
exports.minify_css = minifyCss;

// read, combine and uglyify js
const scripts = function() {
    return gulp.src(paths.src.scripts)
        .pipe(include())
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist.scripts));
};
exports.scripts = scripts;

// read and optimize images
const images = function () {
    return gulp.src(paths.src.images)
        .pipe(gulp.dest(paths.dist.images));
};
exports.images = images;

// copy static files from src to dist
const copy = function() {
    return gulp.src(paths.src.fonts)
        .pipe(gulp.dest(paths.dist.fonts));
};
exports.copy = copy;

const reload = function() {
    browserSync.reload();
};

const watch = function(done) {
    gulp.watch(paths.watch.styles, gulp.series([styles]));
    gulp.watch(paths.watch.templates).on('change', reload);
    gulp.watch(paths.watch.scripts, gulp.series([scripts])).on('change', reload);
    done();
};

const serve = function(done) {
    browserSync.init({
        proxy: bsProxy,
        /* activate for local https
        https: { key: "/usr/local/etc/httpd/certs/localhost-key.pem", cert: "/usr/local/etc/httpd/certs/localhost.pem" },
        */
        open: false,
        injectNotification: 'overlay'
    }, () => {
        done();
    });
};
exports.serve = serve;

exports.default = gulp.parallel([serve, watch]);
exports.deploy = gulp.series([minifyCss, scripts, images, copy]);