CODEWITHSUNDEEP
gruntjsnpmjekyll
Ryen Beatty
Ryen Beatty

Reputation: 23

Set up grunt to build Jekyll site, serve & livereload

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"]);

};

Upvotes: 2

Views: 3109

Answers (1)

Seth Warburton
Seth Warburton

Reputation: 2413

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

Upvotes: 3

Related Questions