To get started, let’s first discuss the basic workflow and file structure that we’ll be working with. As shown in the image below, we’ll be storing our site assets in the
To get started creating our Gulpfile, we first need to define and install the packages we’ll be using.
The first assets we are going to focus on optimizing is our site’s stylesheets. To do this we are first going to compile our main Sass file and utilize autoprefixer and cssnano to add the necessary vendor-prefixes and minify the resulting CSS to make it as minimal as possible.
js/ directory, you’ll notice there are two subdirectories,
Note: I’ve also chosen to add a
libs/ subdirectory within
global/ to contain third-party scripts, but this is just to keep things organized.
For this process we will need to create three tasks, two for processing the global and the local scripts, and a third task that calls them both.
Anyone whose done any sort of web development knows, this is where most websites run into the most performance trouble. Poorly optimized images will add the most overhead to your website loading-time, though many people believe that if you just scale down your images then they will inevitably load quickly. While it’s true that selecting the correct dimensions and resolution are very important, an unoptimized small image can have a larger file-size than an optimized image that’s twice the size.
Additionally, the following task doesn’t distinguish between existing and newly added images, which in most cases, makes this the most time-consuming build processes. As a result, if your site has a lot of images I would recommend removing this task from the default
build task, and instead running this task manually when new images are added.
Since most font files are optimized prior to distribution, the task for processing our fonts is fairly simple, we simply want to collect all of the files from the
_assets/fonts/ subdirectories and place them all within the resulting
Now it’s time to setup the basic Jekyll build process, as well as browser-sync for convenient auto-reload functionality.
Following the Boy Scout Rule, we’re gonna need a few tasks to clean up after ourselves. These tasks can basically act as an “undo” button for the gulp tasks we’ve created.
Originally published at brettstevenson.io.