Grunt with Jekyll

Below you will find my 'current' Gruntfile.js. It's still very much a work in progess, but I finally have it running smoothly and in a way that suits me.

Gruntfile.js Tasks

  • grunt & grunt watch set to the default grunt task, so either command does the same thing: compiles SASS, minifies resulting CSS file, deletes the non-minified CSS file and finally runs the jekyll build command with grunt-shell.

  • grunt server Starts an express server allowing for livereload. It also executes the grunt watch command when any important file changes. So it does everything above plus running the server on port 9000.

  • grunt build Same as grunt watch for now. Will be extending this one in the future.

  • grunt deploy Still working on this one. Eventually will get everything ready to deploy to production and mabe even push to production server. Currently a work in progress, though.

'use strict';

module.exports = function(grunt) {
    // Time how long tasks take. Can help when optimizing build times
    require('time-grunt')(grunt);
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        express: {
            all: {
                options: {
                    port: 9000,
                    hostname: "0.0.0.0",
                    bases: ['_site'],
                    livereload: true,
                }
            }
        },
        shell: {
            jekyllBuild: {
                command: 'jekyll build'
            },
            jekyllServer: {
                command: 'jekyll server'
            },
            jekyllDeploy: {
                command: 'cp -a _site/. _deploy/'
            }
        },
        clean: {
            css: {
                src: [ 'css/*.css', '!css/style.min.css' ]
            },
            deploy: {
                src: [ '_deploy' ]
            }
        },
        sass: {
            jekyll: {
                files: {
                    'css/style.css' : 'sass/style.scss'
                }
            }
        },
        cssmin: {
            minify: {
                expand: true,
                cwd: 'css/',
                src: ['*.css', '!*.min.css'],
                dest: 'css/',
                ext: '.min.css'
            }
        }, /*
       copy: {
           deploy: {
               files: {    
                   expand: true,
                   src: ['_site/*'],
                   dest: '_deploy/*'
               }
           }
       }, */
        watch: {
            css: {
                files: ['sass/**/*scss'],
                tasks: [
                    'sass:jekyll',
                    'cssmin',
                    'clean:css',
                    'shell:jekyllBuild',
                ],
                options: {
                    livereload: true
                }
            },
            jekyllSources: {
                files: [
                    '*.html',
                    '*.yml',
                    'assets/js/**.js',
                    '_posts/**',
                    '_includes/**'
                  ],
                tasks: [
                    'shell:jekyllBuild',
                ],
                options: {
                    livereload: true
                }
              },
        },
        open: {
            all: {
                path: 'http://localhost:<%= express.all.options.port%>/index.html'
            }
        },
        sync: {
            deploy: {
                files: [{
                    cwd: '_site',
                    src: [ '**' ],
                    dest: '_deploy',
                }],
                verbose: true
            }
        },
        changelog: {}
    });

    grunt.registerTask('default', [ 'watch' ]);

    grunt.registerTask('server', [
        'express',
        'open',
        'watch'
    ]);

    grunt.registerTask('build', [
        'sass:jekyll',
        'cssmin',
        'clean:css',
        'shell:jekyllBuild'
    ]);

    grunt.registerTask('deploy', [
        'sync:deploy',
        //'clean:deploy',
        //'shell:jekyllDeploy',
        'changelog'
    ]);
}

Below is the package.json file:

{
  "name": "jekyllsandbox",
  "version": "0.1.0",
  "description": "n8g with jekyll",
  "author": "nate geslin",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git://github.com/n8rzz/jekyllsandbox"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-sass": "^0.7.4",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-conventional-changelog": "^1.1.0",
    "grunt-express": "^1.4.1",
    "grunt-open": "^0.2.3",
    "grunt-shell": "^0.7.0",
    "grunt-sync": "0.0.8",
    "matchdep": "^0.3.0",
    "time-grunt": "^0.4.0"
  }
}

You can view the full code on GitHub

I'm a relatively recent grunt convert. But, I can tell you, it is relatively easy to pick up and has the ability to do some amazing things! The livereload capability alone is enough to at least take a look at it!

References