Minify and Combine CSS - Jekyll Github Pages

This blog is hosted on Github (Github Pages) and today I was interested in minifying css files to improve page speed. There are many ways you can do this. I chose to use Gulp for the task. Gulp is a framework good for automation tasks. Webpack may be a great tool, but I like Gulp. Its easy to work with for tasks like this.

If you are from the Ruby world, like my self, Gulp is like Rake. You can use Rake. I like Gulp.

How to

If you haven’t, install Gulp. Then make a gulpfile.

#~ npm install -g gulp-cli
#~ touch gulpfile.js

Now lets make a npm package. Give relevant information about your package.

#~ npm init
#~ ... answer the questions

Then install the dependencies. --save-dev will write the dependencies to the package.json file.

npm install --save-dev gulp gulp-clean-css gulp-concat

Now its time to write the gulp task.

// gulp.file
let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');
let concat = require('gulp-concat');
let rename = require('gulp-rename');

gulp.task('minify-css', () => {
  return gulp.src(['public/css/poole.css', 'public/css/syntax.css', 'public/css/hyde.css'])
    .pipe(cleanCSS({compatibility: 'ie8'}))

The problem is, Jekyll is going to think node_modules and other stuff we just added should be compiled. So we need to ignore it. Add this to your _config.yml file.

  - package.json
  - gulpfile.js
  - node_modules

Then if you already haven’t done, add node_modules to .gitignore.

And finally run it gulp minify-css. Now you can add a single minified css file for your project.