- Intro and Setup
- Server with BrowserSync and Configuration
- Build, Clean and Jekyll
- Creating CSS with Sass (and Compass)
- Images and Vector Fonts
- Base64 Encoded Images
- Watch for Changes
- Generating CSS Image Sprites
- Production Build, Server and Jekyll
- Deploying the Website with Rsync
- Performance Improvements with WebP and Gzip
First I will write a task, which will optimize the CSS. Compass is able to minimize the CSS for production, but this Gulp.js task squeezed another 6 KB out of my files.
I install the needed Gulp.js plugins:
$ npm install --save-dev email@example.com firstname.lastname@example.org
This task will copy the CSS files from the assets folder, minimize them, remove comments, output the size of the file and copy them to the production assets folder.
$ npm install --save-dev email@example.com
Next I will take care of the images. They need to be copied to the production assets folder and crunshed (reduce the size). This may take a while, depending on the size and amount of your images, that’s why I only optimize the images for production.
gulp-imagemin for my task, which is able to minify PNG, JPG, GIF and SVG images:
$ npm install --save-dev firstname.lastname@example.org
This task will take my images, optimize them, copy them to the assets folder and output the size.
As said before I wrote this task, so you can see how to do it, but I don’t use it, because the reduction is minimal and not worth the messy markup. I like to keep it readable so other people can learn from it.
$ npm install --save-dev email@example.com