Skip to content

Instantly share code, notes, and snippets.

@beep

beep/gulpfile.js Secret

Created Dec 12, 2019
Embed
What would you like to do?
ethan’s janky gulpfile (sass+jekyll)
"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"
)
) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment