JekyllとCompassをGruntでwatchする

このブログはブログシステムにJekyllを採用しています。今回はGruntを利用したJekyllのbuild方法について書き残しておきます。

JekyllをGrunt経由でbuildする理由

JekyllをGrunt経由でbuildしたいのは、minifyなど細かい部分はGruntの方が秀でているためです(ここではそこまで解説しませんが)。JSなんかもUglifyできますしね。

環境

  • Windows8 64bit
  • Ruby Ver.1.9.3
  • Jekyll Ver.1.4.2

やり方

grunt-jekyllを使うという選択肢もありますが、気分的にもう少し独立させたかったのでGruntからshellをたたく形にしました。

今回は「てっく煮ブログ」さんを参考にさせて頂きました(参考:Jekyll で --watch の代わりに Grunt を使ってみるテスト)。ファイルの内容は下記の通りです。

package.json

{
  "name": "none",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-shell-spawn": "~0.2.4",
    "grunt-contrib-watch": "~0.4.4",
    "grunt-contrib-compass": "*"
  }
}

Gruntからshellを叩くためのモジュール(grunt-shell-spawn)と、後は定番を設定します。nameの所は任意なのでご随意にどうぞ。

Grunt.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    shell: {
      jekyll: {
        command: 'jekyll build --drafts'
      }
    },
    compass: {
      dev: {
        options: {
          sassDir: '_sass/',
          cssDir: '_site/css/',
        }
      }
    },
    watch: {
      sass: {
        files: '_sass/**/*.scss',
        tasks: ['compass:dev']
      },
      jekyll: {
        files: [
                '_posts/**/*.md',
                '_drafts/**/*.md',
                '_layouts/*.html',
                '*.html',
                'assets/css/*.css',
                '_includes/*.html',
                '_config.yml'
               ],
        tasks: ['shell:jekyll']
      },

    }
  });

  grunt.loadNpmTasks('grunt-shell-spawn');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['shell:jekyll', 'compass:dev']);
};

タスクはシンプルに、shell:jekyllcompass:devで構成しました。将来的にはcompass:productionでも作ってminifyなどが入ればいいかなと。

CSSについてはcompass通ったらそのまま_site/cssに生成されるようにしました(そのため、トップ階層のCSSフォルダはjekyllのwatch対象から外れるため、_config.ymlのexcludeにcssを入れています)。

_config.yml

最後にjekyllの_config.ymlのexcludeにGruntfile.jsとpackage.jsonを入れておしまいです。

name: Your New Jekyll Site
markdown: redcarpet
exclude: ['node_modules','Gruntfile.js','package.json']

あとがき

今回はjekyllを使ってデザインする上で最低限のGruntタスクを登録しました。しばらくこれを使い、不足があれば今後追記していきます。 あと、今回たまたま見つけたjekyll+Grunt構成におけるサンプルGrunt.jsがあったので紹介しておきます。

Example Gruntfile.js for use with Jekyll