blog

jekyll ではじめる Static Web Site シリーズJekyll × Gruntでブログを作ってみた:NodeモジュールとGruntタスク

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    はじめに

    前回の環境構築編では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について紹介していきます。

    シリーズ

    1. Jekyll × Gruntでブログを作ってみた:環境構築編
    2. Jekyll × Gruntでブログを作ってみた:NodeモジュールとGruntタスク
    3. Jekyll × Gruntでブログを作ってみた:まずはJekyllだけ動かしてみる
    4. Jekyllの関連記事表示とGSLを使った処理時間の短縮
    5. jekyllでFontAwesomeアイコンを表示するLiquid Tagを作った
    6. jekyllのタグを投稿数で並び替えて表示する
    7. jekyllでタグ・カテゴリ・マンスリーアーカイブページを作る
    8. jekyllでプラグインを使った動的ページ生成

    コメント・フィードバック