When you’re putting together a build process for a site, it’s so dang useful to look at other people’s processes. I ran across Andrew Welch’s “An Annotated webpack 4 Config for Frontend Web Development” the other day and was glad he blogged it. If I was kicking off a new site where I wanted a webpack build, then I’d almost certainly reference something like this rather than start from scratch. At the same time, it made me realize how build processes all have such different needs and how unique those needs are now from even a few years ago in the hay day of Grunt and Gulp build processes.
I was looking around for an annotated Gulp reference file and came across another one of Andrew’s articles — “A Gulp Workflow for Frontend Development Automation” — from just one year earlier! Here’s a simplified list of what he was doing with Gulp (which he explains in more detail in the post):
- Compile Sass
- Run Autoprefixer
- Create Sourcemaps
- Minify
- Inject critical CSS and bits of scripts
- Run Babel
- Uglify
- Do style injection/reloading
- Run accessibility audit
- Generate icon font
- Optimize images
Speaking of Gulp and annotated build processes, I’m working on a CSS-Tricks redesign and, for various reasons, went with a Gulp build. Against my better judgment, I wrote it from scratch, and this is how far I’ve gotten. It doesn’t feel particularly robust or efficient, so rewrites and suggestions are welcome! And speaking of Gulp, here’s a recently-published boilerplate I wish I had seen before starting.
Now, a year later, here’s what the build process is being asked to do:
- Run differently-configured web servers
- Hot module replacement
- Dynamic code splitting
- Lazy loading
- Make modern and legacy code bundles
- Cache busting
- Create service worker
- Compile PostCSS
- Optimize images / create .webp
- Process .vue files
- Run Tailwind and PurgeCSS
It’s funny how quickly things change. We’re still essentially asking for help compiling files and optimizing things, but the tools we use change, the code we write changes, the way we talk about development changes, the expectations of development changes, the best practices change… makes ya sweat. 😅
I am far from a gulp master, but one plugin I found that makes my gulp file a bit easier to use is gulp-load-plugin. It’s nice because you don’t need to assign each plugin manually before you use it. You just do something like this:
var gulp = require (“gulp”);
// Assign $ to gulp-load-plugins
var $ = require(”’gulp-load-plugins”)();
// Now use any other gulp plugin
// .pipe($.some-plugin()
// So, gulp-sass becomes $.sass()
Here is a nice write-up: https://andy-carter.com/blog/automatically-load-gulp-plugins-with-gulp-load-plugins
I too started out writing a Gulp file from scratch and spent many hours perfecting it. Then Gulp v4 came out and many things changed. After this I decided to look for a boilerplate like https://github.com/ahmadawais/WPGulp which is annotated well so you can follow along with how it works.