gulpfile.js

/**
 * Main Gulp file
 *
 * This main Gulp file imports all modules and
 * creates all Gulp tasks accordingly.
 *
 * Table of contents
 * 1) Load plugins
 * 2) Styles
 * 3) Scripts
 * 4) Images
 * 5) SVG
 * 6) Critical CSS
 * 7) Purify CSS
 * 8) HTML
 * 9) Clean
 * 10) Clear
 * 11) Default
 * 12) Watch
 */



/**
 * 1) Load plugins
 *
 * Require all modules and define variables.
 */

 var gulp         = require('gulp'),
     browserSync  = require('browser-sync').create(),
     del          = require('del'),
     critical     = require('critical'),
     $            = require('gulp-load-plugins')();

const os = require('os');



/**
 * 2) Styles
 *
 * First find all .scss-files within the /assets/scss/ directory,
 * after that autoprefix what's necessary, then minify, finally move
 * to /assets/dist/css/style.css.
 */

gulp.task('styles', function() {
    return gulp.src('assets/scss/styles.scss')
    .pipe($.sass())
    .pipe($.autoprefixer('last 2 versions', 'Firefox ESR', 'Opera 12.1'))
    .pipe($.cssnano({
        discardComments: {
            removeAll: true
        }
    }))
    .pipe(gulp.dest('assets/dist/css'))
    .pipe(browserSync.stream())
    // .pipe($.notify({ title: 'Styles', message: 'Task completed', onLast: true }))
});

gulp.task('styles-ie', function() {
    return gulp.src('assets/scss/ie.scss')
    .pipe($.sass())
    .pipe($.autoprefixer('ie 8', 'ie 9'))
    .pipe($.pixrem({ rootValue: '1em' }))
    .pipe($.cssnano({
        discardComments: {
            removeAll: true
        }
    }))
    .pipe(gulp.dest('assets/dist/css'))
    .pipe(browserSync.stream())
    // .pipe($.notify({ title: 'Styles', message: 'Task completed', onLast: true }))
});





/**
 * 3) Scripts
 *
 * First find all .js-files withing the /assets/js/ directory,
 * concat all files, add the .min-suffix, uglify and then move to /assets/dist/js.
 */

gulp.task('scripts-head', function() {
    return gulp.src(['assets/js/head.js', 'assets/js/vendor/modernizr.js'])
    .pipe($.concat('head.js'))
    .pipe($.rename({ suffix: '.min' }))
    .pipe($.uglify())
    .pipe(gulp.dest('assets/dist/js'))
    .pipe(browserSync.stream())
    // .pipe($.notify({ title: 'Scripts', message: 'Task completed', onLast: true }))
});

gulp.task('scripts', function() {
    return gulp.src(['node_modules/jquery/dist/jquery.js', 'assets/js/vendor/*.js', 'assets/js/**/*.js', '!assets/js/head.js', '!assets/js/vendor/modernizr.js'])
    .pipe($.concat('main.js'))
    .pipe($.rename({ suffix: '.min' }))
    .pipe($.uglify())
    .pipe(gulp.dest('assets/dist/js'))
    .pipe(browserSync.stream())
    // .pipe($.notify({ title: 'Scripts', message: 'Task completed', onLast: true }))
});



/**
 * 4) Images
 *
 * First find all files within the /assets/img/ directory,
 * after that optimize the images and save them to /assets/dist/img.
 */

gulp.task('images', function() {
    return gulp.src('assets/img/**/*')
    .pipe($.cache($.imagemin({
        optimizationLevel: 3,
        progressive: true,
        interlaced: true,
    })))
    .pipe(gulp.dest('assets/dist/img'))
    .pipe(browserSync.stream())
    // .pipe($.notify({ title: 'Images', message: 'Task completed', onLast: true }))
});



/**
 * 5) SVG
 *
 * First find all SVG files within the /assets/img/ directory,
 * after that optimize SVGs, make fallback PNGs and save them to /assets/img/icons
 */

gulp.task('svg2png', function() {
    return gulp.src('assets/img/**/*.svg')
    .pipe($.svg2png())
    .pipe(gulp.dest('assets/dist/img/icons/png'))
    // .pipe($.notify({ title: 'SVG 2 PNG', message: 'Task completed', onLast: true }))
});

gulp.task('svg', ['svg2png'], function() {
    return gulp.src('assets/dist/img/**/*.svg')
    .pipe($.svgSymbols({
        templates: ['default-svg']
    }))
    .pipe(gulp.dest('assets/dist/img/icons'))
    // .pipe($.notify({ title: 'SVG', message: 'Task completed', onLast: true }))
});



/**
 * 6) Critical CSS
 *
 * When we type `$ gulp critical` in the command line,
 * this command will extract the critical css and inlines HTML and CSS.
 *
 * WARNING: you should have a play with it's output and change the `dest` while you're at it.
 * You can also chose to ignore multiple selectors from your css.
 */

gulp.task('critical', function() {
    critical.generate({
        inline: true,
        base: './',
        src: 'index.html',
        css: ['assets/dist/css/styles.css'],
        dest: 'dist/index.html',
        minify: true,
        width: 1300,
        height: 900,
        ignore: ['body.debug:before']
    });
});



/**
 * 7) Purify CSS
 *
 * When we tye `$ gulp purify` in the command line,
 * this command will report what CSS is not being used in your terminal.
 */

gulp.task('purify', function() {
    return gulp.src('assets/dist/css/styles.css')
    .pipe($.purifycss(['index.html'], {
        output: false,
        info: true,
        rejected: true
    }));
});



/**
 * 8) HTML
 *
 * When we tye `$ gulp html` in the command line,
 * this command will minify the HTML files.
 */

gulp.task('html', function() {
    return gulp.src(['**/*.html', '!node_modules/**/*'])
    .pipe($.htmlmin({
        removeComments: true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes: true,
        removeEmptyAttributes: true,
        quoteCharacter: '"'
    }))
    .pipe(gulp.dest('./'));
});



/**
 * 9) Clean
 *
 * Clean the dist folder prior to moving to production.
 */

gulp.task('clean', function() {
    return del(['assets/dist/css', 'assets/dist/js', 'assets/dist/img']);
});



/**
 * 10) Clear
 *
 * Clear the cache.
 */

gulp.task('clear', function (done) {
    $.cache.Cache({
        tmpDir: os.homedir(),
        cacheDirName: "gulp-cache"
    });

    return $.cache.clearAll(done);
});



/**
 * 11) Default
 *
 * When we type `$ gulp` in the command line,
 * these default tasks will run.
 */

gulp.task('default', ['clean', 'clear'], function() {
    gulp.start('clean', 'clear', 'styles', 'styles-ie', 'scripts', 'scripts-head', 'images', 'svg');
});



/**
 * 12) Watch
 *
 * When we tye `$ gulp watch` in the command line,
 * these files and folders will trigger Gulp tasks.
 */

gulp.task('watch', function() {
    browserSync.init({ server: './' });

    gulp.watch('assets/scss/**/*.scss', ['styles', 'styles-ie']);
    gulp.watch('assets/js/**/*.js', ['scripts', 'scripts-head']);
    gulp.watch('assets/img/**/*', ['images', 'svg']);

    gulp.watch(['*.html']).on('change', browserSync.reload);
});