Grunt + Jekyll + LESS

As you may have noticed, the website looks different to how it was previously. I decided it was time for a refresh and I wanted to make the design a little more interesting.

While Jekyll & Github pages use SASS the Bootstrap theme I settled for uses LESS . This meant that I needed to compile all of my CSS outside of Jekyll. Most of the articles I found say use either Gulp or Grunt , looking at the syntax of the two I preferred Grunt as it didn’t look like code.

Installation was straight forward enough;

brew install node
npm install -g grunt-cli

So now what? I needed something which would do the following …

Compile the LESS files
Combine all of the CSS files into one
Minify the resulting CSS files
Run Jekyll to build the files

After a lot of trial and error I managed to get all of the above plus the ability to have the browser automatically refresh when I change a file, which was nice 😄

You can see what happens when I run grunt server or grunt css in the following asciicast ….

Grunt Example

My configuration currently looks like ….

packages.json

{
 “name”: “mediaglasses”,
 “version”: “0.0.1”,
 “description”: “The Media Glasses Jekyll site”,
 “author”: “Russ McKendrick <[email protected]>”,
 “homepage”: “http://media-glass.es/",
 “license”: “”,
 “devDependencies”: {
 “grunt”: “~0.4.5”,
 “grunt-contrib-concat”: “*”,
 “grunt-contrib-cssmin” : “*”,
 “grunt-contrib-watch” : “*”,
 “grunt-contrib-less”: “*”,
 “grunt-jekyll”: “*”,
 “grunt-contrib-connect”: “*”,
 “load-grunt-tasks”: “*”
 }
}

Gruntfile.js

module.exports = function(grunt) {
 grunt.initConfig({
 pkg: grunt.file.readJSON(‘package.json’),

less: {
 development: {
 options: {
 compress: true,
 yuicompress: true,
 optimization: 2
 },
 files: {
 “_css/main.css”: “_less/main.less”
 }
 }
 }, 
 concat: {
 css: {
 src: [
 ‘_css/*’
 ],
 dest: ‘css/main.css’
 }
 },
 cssmin: {
 css: {
 src: ‘css/main.css’,
 dest: ‘css/main.min.css’
 }
 },
 jekyll: {
 options: { 
 src: ‘.’
 },
 dist: {
 options: {
 dest: ‘./_site’,
 config: ‘_config-dev.yml’
 }
 }
 },
 watch: {
 options: {
 livereload: true,
 },
 css: {
 files: [‘_css/*’, ‘_less/*’],
 tasks: [‘less’, ‘concat:css’, ‘cssmin:css’]
 },
 html: {
 files: [‘*.html’, ‘_includes/*.html’, ‘_layouts/*.html’, ‘_posts/*’],
 tasks: [‘jekyll’],
 options: {
 spawn: false,
 }
 }
 },
 connect: {
 server: {
 options: {
 port: 8000,
 base: ‘./_site’
 }
 }
 },

});
require(‘load-grunt-tasks’)(grunt);
grunt.registerTask(‘default’, [‘less’, ‘concat:css’, ‘cssmin:css’, ‘jekyll’]);
grunt.registerTask(‘css’, [‘less’, ‘concat:css’, ‘cssmin:css’]);
grunt.registerTask(‘server’, [‘connect’, ‘watch’]);
};

The following posts helped me get to where I am at the moment;

I plan on adding a few more options to optimise the images and also compile the Javascript into something a little more discrete, eventually you can read it here.