gulpfile_es6_browserify_sass.js

gistfile1.txt

'use strict';


import browserSync, { reload } from 'browser-sync';
import browserify from 'gulp-browserify';
import fs from 'fs';
import gulp from 'gulp';
import autoprefixer from 'autoprefixer';
import babel from 'gulp-babel';
import cache from 'gulp-cache';
import cheerio from 'gulp-cheerio';
import concat from 'gulp-concat';
import connect from 'gulp-connect';
import csscomb from 'gulp-csscomb';
import data from 'gulp-data';
import debug from 'gulp-debug';
import filter from 'gulp-filter';
import gulpif from 'gulp-if';
import imagemin from 'gulp-imagemin';
import inject from 'gulp-inject';
import nunjucks from 'gulp-nunjucks';
import postcss from 'gulp-postcss';
import rename from 'gulp-rename';
import responsive from 'gulp-responsive';
import sass from 'gulp-sass';
import bulkSass from 'gulp-sass-bulk-import';
import shorthand from 'gulp-shorthand';
import sourcemaps from 'gulp-sourcemaps';
import svgstore from 'gulp-svgstore';
import svgmin from 'gulp-svgmin';
import uglify from 'gulp-uglify';
import uncss from 'gulp-uncss';
import useref from 'gulp-useref';
import gutil from 'gulp-util';
import watch from 'gulp-watch';
import imacss from 'imacss';
import lazypipe from 'lazypipe';
import path from 'path';
import del from 'del';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import watchify from 'watchify';


const dir = {
    src: './src',
    dst: './build',
    tmp: './.tmp'
};

const paths = {
    html: {
        path: '/',
        ext: 'html'
    },
    config: {
        path: '/config/',
        ext: 'json'
    },
    icons: {
        path: {
            src: '/assets/icons/',
            dst: '/images/icons/'
        },
        ext: 'svg'
    },
    sass: {
        path: {
            src: '/sass/',
            dst: '/styles/'
        },
        ext: 'scss'
    },
    js: {
        path: '/js/',
        ext: 'js'
    },
    images: {
        path: {
            src: '/assets/images/',
            dst: '/images/'
        },
        ext: '{jpg,jpeg,png,svg}'
    },
    fonts: {
        path: {
            src: '/assets/fonts/',
            dst: '/fonts/'
        },
        ext: '(ttf,otf,eot,woff,woff2,svg)'
    },
    data: {
        path: {
            src: '/assets/data/',
            dst: '/data/'
        },
        ext: 'json'
    }
};

gulp.task('html', _html);
gulp.task('sass', _sass);
gulp.task('js', _js);
gulp.task('images', _images);
gulp.task('icons', _icons);
gulp.task('fonts', _fonts);
gulp.task('clean', _clean);
gulp.task('build', gulp.series('clean', gulp.parallel('html', 'images', 'fonts')));
gulp.task('serve', gulp.series('build', _serve, _watch));
gulp.task('watch', _watch);
gulp.task('connect', _connect);
gulp.task('default', gulp.series('build'));

/* Helpers */
function getPath(config, recursive) {
    return {
        dir: dir.src + (typeof config.path === 'string' ? config.path : config.path.src),
        src: dir.src + (typeof config.path === 'string' ? config.path : config.path.src) + (recursive ? '*' : '**/*') + '.' + config.ext,
        dst: dir.dst + (typeof config.path === 'string' ? config.path : config.path.dst),
        tmp: dir.tmp + (typeof config.path === 'string' ? config.path : config.path.dst)
    }
}

function getHtmlData(file) {
    var configPath = getPath(paths.config, false).dir + path.basename(file.path, '.html') + '.json';
    var dependencies = {};
    var config;
    var data = {};

    try {
        require.resolve(configPath);
    }
    catch (e) {
        return {};
    }

    config = require(configPath);

    for (let depPath of config.dependencies)
    {
        var dep = require(getPath(paths.config, false).dir + depPath);
        Object.assign(dependencies, dep);
    }

    Object.assign(data, dependencies, config);

    return data;
}

function fileContents (filePath, file) {
    return file.contents.toString();
}

/* Gulp Tasks */

var _sassPipe = lazypipe()
    .pipe(bulkSass)
    .pipe(function() {
        return sass().on('error', sass.logError);
    })
    .pipe(postcss, [
        autoprefixer({ browsers: ['last 2 versions']})
    ])
    //.pipe(uncss({ html: getPath(paths.html, false).src }))
    .pipe(shorthand)
    .pipe(csscomb);

var _jsPipe = lazypipe()
    .pipe(babel, { presets: ['es2015'] })
    .pipe(browserify, {
      insertGlobals : true,
      debug: false
    })
    .pipe(uglify);

var _assetsPipe = lazypipe()
    .pipe(sourcemaps.init, { loadMaps: true })
    .pipe(function(){
        return gulpif('*.scss', _sassPipe())
    })
    .pipe(function(){
        return gulpif('*.js', _jsPipe())
    });

function _clean(done) {
    del.sync([dir.dst]);
    done();
}

function _serve(done) {
    browserSync({ server: { baseDir: dir.dst } });
    done();
}

function _connect(done) {
    connect.server({
        root: dir.dst,
        livereload: true
    });
    done();
}

function _watch() {
    gulp.watch(getPath(paths.html, false).src, gulp.series('html'));
    gulp.watch(getPath(paths.sass, true).src, gulp.series('html'));
    gulp.watch(getPath(paths.js, true).src, gulp.series('html'));
    gulp.watch(getPath(paths.config, false).src, gulp.series('html'));
    gulp.watch(getPath(paths.icons, false).src, gulp.series('html'));
    gulp.watch(getPath(paths.data, false).src, gulp.series('html'));
    gulp.watch(getPath(paths.images, true).src, gulp.series('images'));
    gulp.watch(getPath(paths.fonts, true).src, gulp.series('fonts'));
}

// TODO: Mess with caching

function _html() {
    return gulp.src(getPath(paths.html, false).src)
        .pipe(inject( _icons(), {
            transform: fileContents,
            name: 'icons'
        }))
        .pipe(data(getHtmlData))
        .pipe(nunjucks.compile())
        .pipe(useref({}, _assetsPipe))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(getPath(paths.html, false).dst))
        .pipe(reload({ stream:true }));
}

function _sass() {
    return gulp.src(getPath(paths.sass, false).src)
        .pipe(sourcemaps.init())
        .pipe(_sassPipe())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(getPath(paths.sass, false).dst))
        .pipe(reload({ stream:true }));
}

function _js() {
    return gulp.src(getPath(paths.js, false).src)
        .pipe(sourcemaps.init())
        .pipe(_jsPipe())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(getPath(paths.js, false).dst))
        .pipe(reload({ stream:true }));
}

function _images() {
    return gulp.src(getPath(paths.images, true).src)
        .pipe(cache(imagemin({
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest(getPath(paths.images, true).dst))
        .pipe(reload({ stream:true }));
}

function _icons() {
    return gulp.src(getPath(paths.icons, false).src)
        .pipe(svgmin())
        .pipe(rename( {prefix: 'icon-'} ))
        .pipe(svgstore())
        .pipe(cheerio({
            run: function ($) {
                $('style').remove();
                $('defs').remove();
                $('svg').attr('style',  'display:none');
                $('[fill]').removeAttr('fill');
            },
            parserOptions: { xmlMode: true }
        }))
        .pipe(rename({basename: 'icons'}))
        .pipe(gulp.dest(getPath(paths.icons, false).dst));
}

function _fonts() {
    return gulp.src(getPath(paths.fonts, true).src)
        .pipe(gulp.dest(getPath(paths.fonts, true).dst))
        .pipe(reload({ stream:true }));
}


function _email_html() {
    
}

function _email_css() {
    
}