Set up grunt to build Jekyll site, serve & livereload

Question

I have a simple Jekyll site, and am using grunt to compile LESS files.

I want to build in the ability to continue compiling .less files, building the jekyll site & serving it locally. I also have a task to watch and copy compiled css files into the jekyll _site folder.

However the Grunftile I have at the moment isn't quite working:

module.exports = function (grunt) {
grunt.initConfig({
    // compile set less files
    less: {
        development: {
            options: {
                paths: ["assets/less"],
                yuicompress: true,
                compress: true
            },
            files: {
                "assets/css/site.css": ["assets/less/*.less", "!assets/less/_*.less"]
            }
        }
    },

    // watch changes to less files
    watch: {
        styles: {
            files: ["less/**/*"],
            tasks: ["less", "copy:css"]
        },
        options: {
            livereload: true,
            spawn: false,
        },
    },

    // copy compiled css to _site
    copy: {
      css : {
        files: {
            cwd: './assets/css/',
            src: 'site.css',
            dest: './_site/assets/css',
            expand: true
        }
      }
    },

    //  run jekyll command
    shell: {
      jekyll: {
        options: {
          stdout: true
        },
        command: 'jekyll build'
      }
    },

    //  jekyll build
    jekyll: {
        files: [
          '*.html', '*.yml', 'assets/js/**.js',
          '_posts/**', '_includes/**'
        ],
        tasks: 'shell:jekyll',
        options: {
          livereload: true
        }
      },

      exec: {
        server: {
            command: 'jekyll serve -w'
        }
      },

      concurrent: {
          options: {  logConcurrentOutput: true },
          server: {
            tasks: ['watch', 'exec:server']
          }
      }

});

// Load tasks so we can use them
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-concurrent');

// the default task will show the usage
grunt.registerTask("default", "Prints usage", function () {
    grunt.log.writeln("");
    grunt.log.writeln("Using Base");
    grunt.log.writeln("------------------------");
    grunt.log.writeln("");
    grunt.log.writeln("* run 'grunt --help' to get an overview of all commands.");
    grunt.log.writeln("* run 'grunt dev' to start watching and compiling LESS changes.");
});

grunt.registerTask("dev", ["less:development", "watch:styles", "copy:css", "shell:jekyll", "concurrent:server"]);

};

"isn't quite working"....how? error messages? description of the problem? The problem is not clear. — Matthew Bakaitis
There are no errors, but both the jekyll build and the css copy tasks are not running. LESS files are compiling. The issue is with the setup of the 'copy:css', 'shell:jekyll', and 'concurrent:server' tasks. Hope that makes it clearer — Ryen Beatty

Seth Warburton Seth Warburton · Accepted Answer · 2014-07-02T08:46:20

It's probably better to have Grunt also building Jekyll, using grunt-jekyll https://github.com/dannygarcia/grunt-jekyll. I suspect you're having issues with Jekyll cleaning the output directory after your copy task has placed your compiled LESS output there, so it's important your tasks are run in the correct sequence.

There's an excellent Yeoman generator with a complete Jekyll / Grunt workflow that's also worth checking out; https://github.com/robwierzbowski/generator-jekyllrb and if you don't want to use Yeoman then you will at least find some helpful pointers in the Gruntfile https://github.com/robwierzbowski/generator-jekyllrb/blob/master/app/templates/Gruntfile.js

Set up grunt to build Jekyll site, serve & livereload

1 Answers