Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample Gulpfile
// 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