gulpfile.js

/*
    SET UP:
    Open Terminal / CMD, run the following    
    1. npm i -g gulp (install GULP globally!)
    2. install the gulp dependancies: 
        a. NPM: npm install --save-dev gulp gulp-concat gulp-uglify gulp-autoprefixer gulp-rename gulp-minify-css gulp-cssnano gulp-sass gulp-sourcemaps del gulp-imagemin gulp-plumber gulp-cache gulp-bootlint gulp-notify browser-sync
        a. YARN: yarn add gulp gulp-concat gulp-uglify gulp-autoprefixer gulp-rename gulp-minify-css gulp-cssnano gulp-sass gulp-sourcemaps del gulp-imagemin gulp-plumber gulp-cache gulp-bootlint gulp-notify browser-sync --dev
    3. Configure the location variables in the gulpfile.js to point to your CSS/SCSS/SASS directories that you are using.
    4. run gulp to start
*/

var gulp            = require('gulp'),
    concat          = require('gulp-concat'),
    uglify          = require('gulp-uglify'),
    autoprefixer    = require('gulp-autoprefixer'),
    rename          = require('gulp-rename'),
    minifyCss       = require('gulp-minify-css'),
    cssnano         = require('gulp-cssnano'),
    sass            = require('gulp-sass'),
    sourcemaps      = require('gulp-sourcemaps'),
    del             = require('del'),
    imagemin        = require('gulp-imagemin'),
    plumber         = require('gulp-plumber'),
    cache           = require('gulp-cache'),
    bootlint        = require('gulp-bootlint'),
    notify          = require('gulp-notify'),
    browserSync     = require('browser-sync');

// Location Variables
var srcPath  = './app/';
var tmpPath    = './tmp/';
var distPath    = './dist/';

// SASS processing options
var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

// Autoprefixer options
var autoprefixerOptions = {
    browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};

// Error Handling
var errorFree = true;
var onError = function(err) {
    errorFree = false;
    var subtitle = 'Error';
    var message = error.message;
    notify.onError({
        title:    'Gulp',
        subtitle: subtitle,
        message:  message,
        sound: false
    })(err);
    this.emit('end');
};

// Start browserSync server
gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: 'tmp'
        }
    })
})

// Bootlint
gulp.task('bootlint', function() {
    return gulp.src([
        srcPath + '*.html'// ,
       // srcPath + 'templates/**/*.html',
    ])
    .pipe(bootlint());
});

// Javascript
gulp.task('scripts', function() {
    gulp.src([
        'node_modules/jquery/dist/jquery.js',
        'node_modules/popper.js/dist/umd/js/popper.js',
        'node_modules/bootstrap/dist/js/bootstrap.js',
        'node_modules/jquery-match-height/dist/jquery.matchHeight.js',
        srcPath + 'js/main.js'
    ])    
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(sourcemaps.init())
    .pipe(concat('main.js')) // Comment to process individually
    .pipe(gulp.dest(tmpPath + 'js'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(distPath + 'js'))
    .pipe( notify( function(f) {
        return errorFree ? {
            title: 'Gulp',
            subtitle: 'success',
            message: 'JS ready',
        }
        : false ;
    }));
});

// CSS
gulp.task('styles', function () {
    return gulp
    .src(srcPath + 'scss/app.scss')
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(tmpPath + 'css'))
    .pipe(browserSync.reload({ // Reloading with Browser Sync
       stream: true
    }))
    .pipe(minifyCss())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(distPath + 'css'))
    .pipe( notify( function(f) {
        return errorFree ? {
            title: 'Gulp',
            subtitle: 'success',
            message: 'CSS ready',
        }
        : false ;
    }));
});

// Move any templates
// gulp.task('templates', function () {
//     return gulp
//         .src(srcPath + 'templates/**/*')
//         .pipe(plumber({errorHandler: onError}))
//         .pipe(gulp.dest(distPath + 'templates'));
// });

// Images
gulp.task('images', function() {
    return gulp.src(srcPath + 'images/**/*.+(png|jpg|jpeg|gif|svg)')
        .pipe(plumber({errorHandler: onError}))
        .pipe(cache(imagemin({
            interlaced: true,
        })))
        .pipe(gulp.dest(distPath + 'images'));
});

// Fonts 
gulp.task('fonts', function() {
    return gulp.src([
        srcPath + 'fonts/**/*',
        'node_modules/font-awesome/fonts/*',
        'node_modules/slick-carousel/slick/fonts/*'
    ])
    .pipe(plumber({errorHandler: onError}))
    .pipe(gulp.dest(tmpPath + 'fonts'))
    .pipe(gulp.dest(distPath + 'fonts'));
})

// Watch for changes in files
gulp.task('watch', function() {
    gulp.watch(srcPath + 'js/**/*', ['scripts']);
    gulp.watch(srcPath + 'scss/**/*', ['styles']);
    gulp.watch(srcPath + 'images/**/*', ['images']);
    gulp.watch(srcPath + 'fonts/**/*', ['fonts']);
    // gulp.watch(srcPath + 'templates/**/*', ['templates']);

    // Nunjucks
    gulp.watch(srcPath + '*.html', browserSync.reload);
    gulp.watch(srcPath + 'js/**/*.js', browserSync.reload);
});

// Cleaning 
gulp.task('clean', function() {
    return del.sync('dist').then(function(cb) {
      return cache.clearAll(cb);
    });
})

gulp.task('clean:dist', function() {
    return del.sync([distPath + '**/*', !distPath + 'images', !distPath + 'images/**/*']);
});

// Default Task
gulp.task('default', ['scripts', 'styles', 'fonts', 'templates', 'bootlint', 'images', 'watch']);
gulp.task('build', ['clean:dist', 'scripts', 'styles', 'theme', 'templates']);