jekyll ではじめる Static Web Site シリーズJekyll × Gruntでブログを作ってみた：NodeモジュールとGruntタスク
はじめに
前回の環境構築編ではGruntのインストールまで紹介しました。
第2回はSassを例にNodeモジュールをインストールしGruntタスクを動かしてみます。
Nodeモジュールとは
Nodeモジュールとはnode.js上で動くモジュールのことです。
npm（Node Packaged Modules）で管理されており、CLIから簡単にアクセスできます。Gruntもこの1つです。
Gruntタスクとは
Gruntタスクは上記のNodeモジュールを制御するための命令プログラムです。
Gruntを使ってSassをどのように制御するか記述します。
ソースとコンパイル後のデータについて
この記事では、ソースを保存するためのフォルダ以外にプレビュー用・リリース用のコンパイル後のデータを保存するフォルダを作ります。この回ではまだsrcのみを利用します。
| フォルダ | 用途 |
|---|---|
| src | コンパイル前のソースファイル |
| prev | ローカル確認用のコンパイル済みデータ |
| release | 公開用のコンパイル済みデータ |
$ mkdir src
$ mkdir prev
$ mkdir release
Nodeモジュールのインストール
Grunt自体のインストールは前回済ませているのでNodeモジュールをインストールしていきます。
load-grunt-configのインストール
まず、load-grunt-configというモジュールをインストールし、SassなどのNodeモジュールを自動で読み込めるようにします。
$ npm install -D load-grunt-config
npm WARN package.json blog.jekyll@1.0.0 No description
npm WARN package.json blog.jekyll@1.0.0 No repository field.
npm WARN package.json blog.jekyll@1.0.0 No README data
load-grunt-config@0.13.1 node_modules/load-grunt-config
├── async@0.2.10
├── glob@3.2.11 (inherits@2.0.1, minimatch@0.3.0)
├── js-yaml@3.0.2 (esprima@1.0.4, argparse@0.1.15)
├── load-grunt-tasks@0.3.0 (findup-sync@0.1.3, globule@0.2.0)
├── lodash-node@2.4.1
├── grunt@0.4.5 (dateformat@1.0.2-1.2.3, which@1.0.5, eventemitter2@0.4.14, getobject@0.1.0, rimraf@2.2.8, colors@0.6.2, async@0.1.22, hooker@0.2.3, grunt-legacy-util@0.2.0, nopt@1.0.10, exit@0.1.2, minimatch@0.2.14, lodash@0.9.2, coffee-script@1.3.3, underscore.string@2.2.1, glob@3.1.21, iconv-lite@0.2.11, grunt-legacy-log@0.1.1, js-yaml@2.0.5, findup-sync@0.1.3)
└── jit-grunt@0.7.1
NodeモジュールとGruntタスクの自動読み込み
次に、Gruntの設定やタスクを記述するGruntfile.jsを作成します。本来、このGruntfile.jsにモジュールの読み込み設定やGruntタスクを記述しますが、load-grunt-configを使うとNode モジュールを自動で読み込み、Gruntタスクを別ファイル化、こちらも自動で読み込めます。ですので、Gruntfile.jsにはload-grunt-config向けの設定のみを書き加えます。
$ vi Gruntfile.js
Gruntfile.js
module.exports = function(grunt, options) {
var path = require('path');
require('load-grunt-config')(grunt, {
configPath: path.join(process.cwd(), '_grunt'),
init: true,
loadGruntTasks: {
config: require('./package.json'),
scope: ['devDependencies', 'dependencies'],
pattern: ['grunt-*']
}
});
};
タスク用のNodeモジュールのインストール
今回利用するNodeモジュールをローカルにインストールします。
インストールするNodeモジュール
Sassに加えて、変更を監視しタスクを実行してくれるgrunt-contrib-watchというNodeモジュールも使ってみましょう。
| Nodeモジュール | 用途 |
|---|---|
| grunt | Grunt本体 |
| grunt-contrib-sass | Sass/SCSSのコンパイル |
| grunt-contrib-watch | ファイル監視とタスクの実行 |
インストールコマンド
スペース区切りで複数のNodeモジュールを読み込みます。
$ sudo npm install grunt grunt-contrib-sass grunt-contrib-watch --save-dev
--save-devというのは、$ npm initで作成されたpackage.jsonというファイルに利用するモジュールの名前とバージョンを追記するための指定です。package.jsonに追記させないとload-grunt-configがNodeモジュールを読み込んでくれません。
Gruntタスクの作成
続いてGruntタスクを作りましょう。
この記事ではload-grunt-configを使うのでNodeモジュール毎にGruntタスクファイルを分けることができます。分けたタスクファイルを保存するために_gruntというディレクトリを用意します。
$ mkdir _grunt
Gruntタスクファイル
今回2つのNodeモジュール（Sass、Watch）を使うのでこの2つのGruntタスクファイルを作ります。モジュールの数だけこのGruntタスクファイルがあります。Gruntタスク関連のファイルは以下のようになります。
_grunt
├── aliases.yaml
├── sass.js
└── watch.js
sass.js
タスクの内容はまずリリース環境とプレビュー環境用に分けます。 sassは_scssというフォルダにscssファイルを作り、src/assets/cssの中にはき出します。Gruntタスクの書き方がよくわからない方はとりあえずコピペして動く環境を作ってみてください。
$ vi _grunt/sass.js
module.exports = {
release: {
options: {
bundleExec: true,
require: ['bourbon','neat'],
style: 'compressed'
},
files: [{
expand: true,
cwd: 'src/_scss',
src: '**/*.scss',
dest: 'src/assets/css',
ext: '.css'
}]
},
prev: {
options: {
bundleExec: true,
require: ['bourbon','neat'],
style: 'nested'
},
files: [{
expand: true,
cwd: 'src/_scss',
src: '**/*.scss',
dest: 'src/assets/css',
ext: '.css'
}]
}
}
watch.js
SCSSファイルを変更する度にSassタスクを実行するよう指定します。監視対象はsrc/_scssディレクトリ下の.scssファイルです。監視対象のファイルが変更されたらtasks: 'sass:prev'を実行します。:prevというのはターゲットと言い、Sassタスクに記述しているプレビュー環境を対象にしたタスクを起動します。
$ vi _grunt/watch.js
module.exports = {
options: {
livereload: true
},
sass: {
files: [
'src/_scss/**/*.scss'
],
tasks: 'sass:prev'
}
}
エイリアスタスクを作る
Gruntタスクをまとめて処理させるエイリアスタスクを作ります。
エイリアスタスクは通常Gruntfile.jsに記述しますが、load-grunt-configを使っているのでaliases.yamlというYAML形式のファイルに記述することができます。
aliases.yaml
$ vi _grunt/aliases.yaml
コマンドラインで$ grunt serveと実行するとsass:prevが実行され、その後watchで変更監視が起動するよう記述されています。defaultは$ gruntが実行された際にエイリアスタスクのserveが実行されます。
serve:
- 'sass:prev'
- 'watch'
default:
- 'serve'
これで、Gruntタスクを動かす準備ができました。
Gruntタスクを実行
サンプルのSCSSを作る
実際にタスクをテストするためにsrcフォルダ内に_scssフォルダを作りこの中にサンプルのSCSSファイルを作ります。
$ mkdir src/_scss
$ vi src/_scss/sample.scss
どんな記述でも構いませんが、SCSSが動いていることを試すため、変数にカラーコードを入れcolorに指定してみます。
$var: #00ffff;
body
{
color: $var;
}
エイリアスタスクを実行
実際にエイリアスタスクを実行してみます。 Gruntの実行はエイリアスタスクでなくとも、直接$ grunt sass:prevのようにGruntタスクを実行することもできます。
$ grunt serve
Running "sass:prev" (sass) task
Running "watch" task
Waiting...
ここまでいけばとりあえず動くところまでいけました。src/assets/css/sample.cssが作成されれば成功です。フォルダの中を確認してみましょう。sapmle.cssにカラーコードを含んだCSSができていれば成功です。
body {
color: #00ffff; }
/*# sourceMappingURL=sample.css.map */
今回はここまで。
次回は本題のJekyllについて紹介していきます。