ethan’s janky gulpfile (sass+jekyll)

gulpfile.js

"use strict";

require( "matchdep" )
    .filterDev( "gulp-*" )
    .forEach( function( module ) {
        global[ module.replace( /^gulp-/, "" ) ] = require( module );
    } );



/*

Paths

*/
const paths = {
    input: "www/",
    output: "www/dist/",
    jekyll: "www/_site/",
    jekylloutput: "www/_site/dist/"
};

const scripts = [
    // Initial JS
    {
        dest: paths.output + "js/",
        files: [
            paths.input + "js/lib/modernizr.js",
            paths.input + "js/config.js",
            paths.input + "js/utils.js",
            paths.input + "js/lib/fontfaceobserver.js",
            // initial.js needs to be last.
            paths.input + "js/initial.js"
        ],
        filename: "initial.js"
    },
    // Main JS
    {
        dest: paths.output + "js/",
        files: [
            paths.input + "js/media-responsive.js",
            paths.input + "js/offline-list.js"
        ],
        filename: "main.js"
    }
];


// Variables!
const gulp = require( "gulp" );
const merge = require( "merge-stream" );
const uglify = require( "gulp-uglify-es" ).default;

gulp.watch_initialized = false;

// Browsersync!
const browserSync = require( "browser-sync" ).create();
const ssi = require( "connect-ssi" );



/*

Build tasks

*/
// Build jekyll
gulp.task( "build:jekyll:prod", function( callback ) {
    var shellCommand = "jekyll build -s " + paths.input + " -d " + paths.jekyll + " -c " + paths.input + "_config.yml";

    return gulp.src( "./" + paths.input )
        .pipe( run( shellCommand ) )
        .on( "error", util.log );
} );
gulp.task( "build:jekyll:local", function( callback ) {
    var shellCommand = "jekyll build -s " + paths.input + " -d " + paths.jekyll + " --incremental --future -c " + paths.input + "_config.yml," + paths.input + "_config_dev.yml";

    return gulp.src( "./" + paths.input )
        .pipe( run( shellCommand ) )
        .on( "error", util.log );
} );

// Build JS/JSON
gulp.task( "build:jsonmin", function() {
    return gulp.src( paths.jekyll + "data/posts.json" )
        .pipe( jsonmin() )
        .pipe( gulp.dest( paths.jekyll + "data/" ) );
} );
gulp.task( "build:js", function( callback ) {
    let build = [];

    for ( let script of scripts ) {
        let job = gulp.src( script.files )
            .pipe( concat(script.filename ) )
            .pipe( uglify() )
            .pipe( gulp.dest( script.dest ) );

        build.push( job );
    }

    callback();
} );

// Build Sass
gulp.task( "build:sass", function( callback ) {
    return gulp.src( paths.input + "css/[^_]*.scss" )
        .pipe( sourcemaps.init() )
        .pipe( sass( {
            outputStyle: "compressed",
            trace: true,
            onError: function( err ) {
                return notify().write( err );
            }
        } ) )
        .pipe( gulp.dest( paths.output + "css/" ) )
        .pipe( gulp.dest( paths.jekylloutput + "css/" ) );
} );
gulp.task( "build:sass-critical", function( callback ) {
    let styles = [
            "critical-contact",
            "critical-post",
            "critical-writing",
            "critical-work",
            "critical-home"
        ],
        jobs = [];

    for ( let i = 0; i < styles.length; i++ ) {
        let job = gulp.src( paths.input + "css/" + styles[ i ] + ".scss" )
            .pipe( sourcemaps.init() )
            .pipe( sass( {
                outputStyle: "compressed",
                trace: true,
                onError: function( err ) {
                    return notify().write( err );
                }
            } ) )
            .pipe( gulp.dest( paths.output + "css/" ) )
            .pipe( gulp.dest( paths.jekylloutput + "css/" ) );

        jobs.push( job );
    }

    merge( jobs );

    callback();
} );
gulp.task( "build:styles", gulp.parallel( "build:sass", "build:sass-critical" ) );

// Optimize icons via SVGO
gulp.task( "build:svgo", function() {
    return gulp.src( paths.input + "img/**/*.svg" )
        .pipe( svgo() )
        .pipe( gulp.dest( paths.output + "img/" ) );
} );
// Build icons
gulp.task( "build:svg", gulp.series( "build:svgo" ) );




/*

Watch tasks

*/
gulp.task( "watch:jekyll", gulp.series(
    "build:jekyll:local",
    "build:jsonmin"
) );
gulp.task( "watch:js", gulp.series( "build:js", "build:jekyll:local", "build:jsonmin" ) );
gulp.task( "watch:sass", gulp.series( "build:styles" ) );
gulp.task( "watch:svg", gulp.series( "build:svg" ) );



/*

Wrapper tasks to build/serve the site

*/
gulp.task( "build", gulp.parallel(
    "build:js",
    "build:styles",
    "build:svg"
), gulp.series(
    "build:jekyll:local",
    "build:jsonmin"
), function( callback ) {
    callback();
} );

gulp.task( "build:prod", gulp.series(
    "build:js",
    "build:styles",
    "build:svg",
    "build:jekyll:prod",
    "build:jsonmin"
), function( callback ) {
    callback();
} );

gulp.task( "serve", function() {
    browserSync.init( {
        ghostMode: false,
        logFileChanges: true,
        injectChanges: false,
        files: "./" + paths.jekyll,
        open: true,
        server: {
            baseDir: "./" + paths.jekyll
        },
        middleware: [
            ssi( {
                baseDir: __dirname + "/" + paths.jekyll,
                ext: ".html"
            } ),
            function ( request, response, next ) {
                var pattern = /^(.*)\.[0-9-]{8}\.(js|css|json)$/,
                    url = request.url,
                    match = url.match( pattern );

                if ( match && match.length === 3 ) {
                    var newURL = [ match[ 1 ], match[ 2 ] ].join( "." );
                    request.url = newURL;
                }
                next();
            }
        ]
    } );
} );

gulp.task( "watch", function( callback ) {
    if ( gulp.watch_initialized == false ) {
        gulp.watch( [
            paths.input + "*.yml",
            paths.input + "htaccess",
            paths.input + "_includes/**/*",
            paths.input + "_layouts/**/*",
            paths.input + "_content/**/*",
            paths.input + "_posts/**/*",
            paths.input + "_scarps/**/*",
            paths.input + "static/**/*",
            paths.input + "**/*.md",
            paths.input + "**/*.php",
            paths.input + "*.xml"
        ], gulp.series( "watch:jekyll" ) );

        gulp.watch( "gulpfile.js", gulp.series( "default" ) );

        gulp.watch( paths.input + "css/**/*.scss", gulp.series( "watch:sass" ) );

        gulp.watch( paths.input + "img/**/*.svg", gulp.series( "watch:svg" ) );

        gulp.watch( paths.input + "js/**/*", gulp.series( "watch:js" ) );

        gulp.watch_initialized = true;
    }
    callback();
} );

gulp.task( "deploy", gulp.series( "build:prod", function() {
    var shellCommand = "rake deploy";

    return gulp.src( "./" + paths.input )
        .pipe( run( shellCommand ) )
        .on( "error", util.log );
} ) );


// Default to our serve task
gulp.task( "default" , gulp.series(
    "build",
    gulp.parallel(
        "watch",
        "serve"
    )
) );