Skip to content

Instantly share code, notes, and snippets.



Last active Mar 24, 2021
What would you like to do?
An updated gulpfile for
// Gulpfile.js
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const cssnano = require('cssnano');
const del = require('del');
const gulp = require('gulp');
const gutil = require('gulp-util');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const run = require('gulp-run');
const runSequence = require('run-sequence');
const sass = require('gulp-ruby-sass');
const uglify = require('gulp-uglify-es').default;
// Include paths file
const paths = require('./_assets/gulp-config/paths');
// Process styles, add vendor-prefixes, minify, then
// output the file to the appropriate location
gulp.task('build:styles:main', function() {
return sass(paths.sassFiles + '/main.scss', {
style: 'compressed',
trace: true,
loadPath: [paths.sassFiles]
}).pipe(postcss([autoprefixer({ browsers: ['last 2 versions']}), cssnano()]))
.on('error', gutil.log);
// Create and process critical CSS file to be included in head.html
gulp.task('build:styles:critical', function() {
return sass(paths.sassFiles + '/critical.scss', {
style: 'compressed',
trace: true,
loadPath: [paths.sassFiles]
}).pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.on('error', gutil.log);
// Build all styles
gulp.task('build:styles', ['build:styles:main', 'build:styles:critical']);
// Delete CSS
gulp.task('clean:styles', function(callback) {
del([paths.jekyllCssFiles + 'main.css',
paths.siteCssFiles + 'main.css',
// Concatenate and uglify global JS files and output the
// result to the appropriate location
gulp.task('build:scripts:global', function() {
return gulp.src([
paths.jsFiles + '/lib' + paths.jsPattern,
paths.jsFiles + '/*.js'
.on('error', gutil.log);
// Uglify local JS files and output the result to the
// appropriate location
gulp.task('build:scripts:local', function() {
return gulp.src(paths.jsFiles + '/local' + paths.jsPattern)
.on('error', gutil.log);
// Build all scripts
gulp.task('build:scripts', ['build:scripts:local', 'build:scripts:global', 'build:scripts:local']);
// Delete processed JS
gulp.task('clean:scripts', function(callback) {
del([paths.jekyllJsFiles + 'main.js', paths.siteJsFiles + 'main.js']);
// Copy fonts
gulp.task('build:fonts', ['fonts']);
// Place fonts in proper location
gulp.task('fonts', function() {
return gulp.src(paths.fontFilesGlob)
.pipe(rename(function(path) {path.dirname = '';}))
.on('error', gutil.log);
// Delete processed font files
gulp.task('clean:fonts', function(callback) {
del([paths.jekyllFontFiles, paths.siteFontFiles]);
// Optimize and copy image files
gulp.task('build:images', function() {
return gulp.src(paths.imageFilesGlob)
optimizationLevel: 3,
progressive: true,
interlaced: true,
use: [pngquant()]
// Delete processed images
gulp.task('clean:images', function(callback) {
del([paths.jekyllImageFiles, paths.siteImageFiles]);
// Place download files in proper location
gulp.task('build:downloads', function() {
return gulp.src(paths.downloadFiles + '/**/*.zip')
.pipe(rename(function(path) {path.dirname = '';}))
.on('error', gutil.log);
// Delete processed download files
gulp.task('clean:downloads', function(callback) {
del([paths.jekyllDownloadFiles, paths.siteDownloadFiles]);
// Run jekyll build command
gulp.task('build:jekyll', function() {
return gulp.src('')
.pipe(run('bundle exec jekyll build --config _config.yml'))
.on('error', gutil.log);
// Delete the entire _site directory
gulp.task('clean:jekyll', function(callback) {
// Runs jekyll build command using test config.
gulp.task('build:jekyll:test', function() {
var shellCommand = 'bundle exec jekyll build --config _config.yml, _config.test.yml';
return gulp.src('')
.on('error', gutil.log);
// Run jekyll build command using local config
gulp.task('build:jekyll:local', function() {
return gulp.src('')
.pipe(run('bundle exec jekyll build'))
.on('error', gutil.log);
// Special tasks for building and reloading BrowserSync
gulp.task('build:jekyll:watch', ['build:jekyll:local'], function(callback) {
gulp.task('build:scripts:watch', ['build:scripts'], function(callback) {
// Serve site and watch files
gulp.task('serve', ['build'], function() {
server: paths.siteDir,
ghostMode: false, // Toggle to mirror clicks, reloads etc (performance)
logFileChanges: true,
logLevel: 'debug',
open: true // Toggle to auto-open page when starting
});['_config.yml'], ['build:jekyll:watch']);
// Watch .scss files and pipe changes to browserSync'_assets/styles/**/*.scss', ['build:styles']);
// Watch .js files'_assets/js/**/*.js', ['build:scripts:watch']);
// Watch image files and pipe changes to browserSync'_assets/img/**/*', ['build:images']);
// Watch posts'_posts/**/*.+(md|markdown|MD)', ['build:jekyll:watch']);
// Watch drafts if --drafts flag was passed
if (module.exports.drafts) {'_drafts/*.+(md|markdown|MD)', ['build:jekyll:watch']);
// Watch html and markdown files['**/*.+(html|md|markdown|MD)', '!_site/**/*.*'], ['build:jekyll:watch']);
// Watch RSS feed'feed.xml', ['build:jekyll:watch']);
// Watch data files'_data/**.*+(yml|yaml|csv|json)', ['build:jekyll:watch']);
// Build site
gulp.task('build', function(callback) {
runSequence(['build:scripts', 'build:styles', 'build:images', 'build:fonts', 'build:downloads'], 'build:jekyll', callback);
gulp.task('build:test', function (callback) {
runSequence('clean', ['build:scripts', 'build:images', 'build:styles', 'build:fonts', 'build:downloads'],
// Deletes _site directory and processed assets
gulp.task('clean', ['clean:jekyll', 'clean:styles', 'clean:scripts', 'clean:images', 'clean:fonts', 'clean:downloads']
// Default Task: build site
gulp.task('default', ['build']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment