JekyllをGrunt経由でビルドする理由
JekyllをGrunt経由でビルドする理由は、CSSやJSのビルドとJekyllのビルド一本化するとプロセスが一つ減る。記事執筆とデザイン変更のタスクランナーを分ける必要がなくなるからです。
逆にデメリットとしてはGruntの監視範囲が広がることによりマシン負荷が高くなるということです。しかしこのブログの様な個人ブログ規模であれば記事も少ないでしょうしCSSもさして複雑でもないと思われるので、実作業に支障をきたすということは考えにくく、無視していいレベルだと思います。
環境
- 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',
'_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:jekyllとcompass:devで構成します。将来的にはcompass:productionでも作ってminifyなどが入ればいいかなと。
CSSについてはcompassでビルドされたらそのまま_site/cssに入るようにします。そこでトップ階層のCSSフォルダはJekyllのwatch対象から外さねば無限ループに入ってしまうため_config.ymlのexcludeにcssを入れています。
_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があったので紹介しておきます。
