Last active
September 19, 2019 11:37
-
-
Save christopherdowson/1a233cd8d527b1aa46f418e7a43b037a to your computer and use it in GitHub Desktop.
Sample Gulpfile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// General use modules | |
var gulp = require('gulp'); // For obvious reasons | |
var gutil = require('gulp-util'); // Because nothing works without it | |
var watch = require('gulp-watch'); // It know what you're up to | |
var plumber = require('gulp-plumber'); // Stops errors from breaking Gulp | |
var gulpif = require('gulp-if'); // Logical, Captain | |
var argv = require('yargs').argv; // I DON'T KNOW WHAT WE'RE YELLING ABOUT! | |
var filter = require('gulp-filter'); // Filters things, I guess? | |
var changed = require('gulp-changed'); // Only process changed files | |
var imagemin = require('gulp-imagemin'); // Minify images | |
var pngquant = require('imagemin-pngquant'); // png plugin for imagemin | |
var notify = require("gulp-notify"); // Pops up an OS notification window. Can be configured, but not essential. | |
var beep = require('beepbeep'); // It beeps. | |
var concat = require('gulp-concat'); // It smushes | |
var rename = require('gulp-rename'); // Ronseal | |
// JS modules | |
var minify = require('gulp-minify'); // JS Minification plugin | |
var strip = require('gulp-strip-comments'); // Ronseal | |
// Sass modules | |
var scss = require('gulp-sass'); // Libsass as opposed to Ruby.. | |
var gcmq = require('gulp-group-css-media-queries'); // Groups media queries together and reduces file size ~ a third. Also, neater. | |
var sourcemaps = require('gulp-sourcemaps'); // Generates sourcemaps | |
var autoprefixer = require('gulp-autoprefixer'); // Does away with need for mixins for everything. | |
// PostCSS Modules | |
var gulpPostcss = require('gulp-postcss'); // Do fun things after compiling | |
var cssdeclsort = require('css-declaration-sorter'); // Sorts all the declarations into alphabetical, SMACSS etc.. | |
var minifyCSS = require('csswring'); // Minifies CSS | |
var mergeRules = require('postcss-merge-rules'); // Merges rules which are similar or share/duplicate declarations | |
var split = require('postcss-critical-split'); // Pull out above-the-fold css for faster rendering. | |
// CSS Modules | |
var csslint = require('gulp-csslint'); // CSS Linting plugin. Quite verbose! | |
// Other modules | |
var htmlmin = require('gulp-htmlmin'); // Removes whitespace | |
var cleanhtml = require('gulp-cleanhtml'); // Also removes whitespace. Let's make them fight. | |
var browser = require('browser-sync'); // Reload and sync between devices | |
var print = require('gulp-print'); // I honestly can't remember what this does, but I've obviously used it. | |
//Functions | |
var onError = function(err) { | |
notify.onError({ | |
title: "gulp error in " + err.plugin, | |
message: err.toString() | |
})(err); | |
this.emit('end'); | |
}; | |
// BrowserSync | |
function browserSync(done) { | |
browser({ | |
proxy: "site.local", | |
open: false | |
}); | |
done(); | |
} | |
// BrowserSync Reload | |
function browserSyncReload(done) { | |
browserSync.reload(); | |
done(); | |
} | |
// Optimize Images | |
function images() { | |
return gulp | |
.src("./src/assets/images/**/*.{gif,jpg,jpeg,svg,png}") | |
.pipe(gulpif(argv.design,changed("./public_html/assets/images/*.{png,gif,jpg,jpeg,svg}"))) | |
.pipe( | |
imagemin([ | |
imagemin.gifsicle({ interlaced: true }), | |
imagemin.jpegtran({ progressive: true }), | |
imagemin.optipng({ optimizationLevel: 5 }), | |
imagemin.svgo({ | |
plugins: [ | |
{ | |
removeViewBox: false, | |
collapseGroups: true | |
} | |
] | |
}) | |
]) | |
) | |
.pipe(gulp.dest("./public_html/assets/images/")) | |
.pipe(browser.reload({stream: true})) | |
done(); | |
} | |
// CSS task | |
function css(done) { | |
return gulp | |
.src("./src/assets/stylesheets/**/*.scss") | |
.pipe(plumber({ | |
errorHandler: onError | |
})) // Don't stop for errors or completion | |
.pipe(gulpif(argv.design,changed('./public_html/assets/stylesheets/**/*.css'))) | |
.pipe(sourcemaps.init({ | |
loadMaps: true | |
})) | |
.pipe(scss({ | |
errLogToConsole: true | |
})) | |
// Begin sass process | |
.pipe(autoprefixer({ | |
overrideBrowserslist: ['last 4 versions'] | |
})) // Prefix for a specified amount of compatability | |
.pipe(gcmq()) | |
.pipe(sourcemaps.write('./maps', {addComment: false})) | |
.pipe(gulp.dest('./public_html/assets/stylesheets')) // And write to disk. | |
.pipe(browser.reload({stream: true})) | |
.pipe(notify({"message": "Compiled <%= file.relative %>."})) | |
done(); | |
} | |
function splitcsscritical(done) { | |
return gulp | |
.src("./public_html/assets/stylesheets/*.css") | |
.pipe(plumber({ | |
errorHandler: onError | |
})) // Don't stop for errors or completion | |
.pipe(gulpPostcss([ | |
split(), | |
//mergeRules(), | |
minifyCSS({removeAllComments: true}), | |
cssdeclsort({ | |
order: 'alphabetically' | |
}) | |
])) | |
.pipe(gulp.dest('./templates/_inline')) // And write to disk. | |
.pipe(browser.reload({stream: true})) | |
.pipe(notify({"message": "Compiled <%= file.relative %>."})) | |
done(); | |
} | |
function splitcssrest(done) { | |
return gulp | |
.src("./public_html/assets/stylesheets/*.css") | |
.pipe(plumber({ | |
errorHandler: onError | |
})) // Don't stop for errors or completion | |
.pipe(gulpPostcss([ | |
split({ | |
'output': 'rest' | |
}), | |
mergeRules(), | |
minifyCSS({removeAllComments: true}), | |
cssdeclsort({ | |
order: 'alphabetically' | |
}) | |
])) | |
.pipe(gulp.dest('./public_html/assets/non-critical-stylesheets')) // And write to disk. | |
.pipe(browser.reload({stream: true})) | |
.pipe(notify({"message": "Compiled <%= file.relative %>."})) | |
done(); | |
} | |
function cleancss(done) { | |
return gulp | |
.src("./public_html/assets/**/*.css") | |
.pipe(plumber({ | |
errorHandler: onError | |
})) // Don't stop for errors or completion | |
.pipe(gulpPostcss([ | |
mergeRules(), | |
minifyCSS({removeAllComments: true}) | |
])) | |
.pipe(gulp.dest('./public_html/assets')) // And write to disk. | |
.pipe(browser.reload({stream: true})) | |
.pipe(notify({"message": "Compiled <%= file.relative %>."})) | |
done(); | |
} | |
// Transpile, concatenate and minify scripts | |
function scripts(done) { | |
return gulp | |
.src([ | |
'./src/assets/js/**/*.js' | |
]) // JS file source including any subfolders | |
.pipe(plumber({ | |
errorHandler: onError | |
})) // Don't stop for errors or completion | |
.pipe(gulpif(argv.design,changed('./public_html/assets/js'))) | |
.pipe(sourcemaps.init({ | |
loadMaps: true | |
})) | |
.pipe(minify({ | |
ext: { | |
src: '.js', | |
min: '.min.js' | |
}, | |
noSource: true | |
})) // minify the JS | |
.pipe(sourcemaps.write('./maps', {addComment: false})) | |
.pipe(gulp.dest('./public_html/assets/js')) // And write to disk. | |
.pipe(browser.reload({stream: true})) | |
.pipe(notify({"message": "Compiled <%= file.relative %>."})) | |
done(); | |
} | |
function twig(done) { | |
return gulp | |
.src('./src/templates/**/*.twig') | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(gulpif(argv.design,changed('./templates'))) | |
.pipe(cleanhtml()) | |
.pipe(htmlmin({ collapseWhitespace: true })) | |
.pipe(gulp.dest('./templates')) | |
.pipe(browser.reload({stream: true})) | |
done(); | |
} | |
function copyfonts(done) { | |
return gulp | |
.src('./src/assets/webfonts/**/*.{ttf,woff,woff2,eot,svg}') | |
.pipe(gulp.dest('./public_html/assets/webfonts')) | |
done(); | |
} | |
// Watch files | |
function watchFiles() { | |
gulp.watch("./src/assets/stylesheets/**/*.scss", css); | |
gulp.watch("./src/templates/**/*.twig", twig); | |
gulp.watch("./src/assets/js/**/*.js'", scripts); | |
gulp.watch("./src/assets/images/**/*.{gif,jpg,jpeg,svg,png}", images); | |
} | |
// define complex tasks | |
const build = gulp.series(twig, gulp.parallel(css, images, scripts, copyfonts), splitcsscritical, splitcssrest); | |
const watcher = gulp.parallel(watchFiles, browserSync); | |
const splitcss = gulp.parallel(splitcsscritical,splitcssrest); | |
// export tasks | |
exports.images = images; | |
exports.css = css; | |
exports.scripts = scripts; | |
exports.twig = twig; | |
exports.build = build; | |
exports.watch = watcher; | |
exports.default = watcher; | |
exports.copyfonts = copyfonts; | |
exports.cleancss = cleancss; | |
exports.splitcss = splitcss; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment