はじめての Vagrant シリーズGruntでWordpressテーマの開発環境を作る

2014年 09月05日
Ryuichi Nonaka

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

はじめに

Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」でWordpressのテーマ開発環境ができました。続いてテーマファイルを開発していくわけですが、タスクランナーもしっかり使いたいのでWordpressテーマに合わせたGrunt環境の構築について紹介したいと思います。

※今更Grunt？と思う方はもちろんGulpでも同じことができると思います。

やりたいこと

今回は複雑なタスクの設定までは紹介しません。最低限必要なSassとwatch機能の用意まで手順を紹介します。

SCSSのコンパイル
CSSの圧縮
Bourbon / neatの利用
画像の圧縮
レスポンシブ用画像の生成
JavaScriptの結合
JavaScriptの圧縮
スタイルガイドの作成

必要な前提知識

Wordpressのお作法
Wordpressのテーマ作成方法
rbenv / bundlerについて（参考：Jekyll × Gruntでブログを作ってみた：環境構築編）
Gruntの基本（Grunt）
Sassの基本（Sass）

Wordpressを動かす環境について

冒頭に紹介しましたが、Wordpress環境はVCCWというツールを使って構築します。詳しくは前回の記事Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」を参考にしてください。

Wordpressテーマの開発について

この記事を読んでいる方はすでにWordpressの開発経験があるような方だと勝手に思っていますが、これから勉強する方に向けて少し情報を補足しておきます。テーマに作成についてはこちらを参考にしてください。

テーマの作成
Wordpressのベースとなるテーマファイル：unserscore（テーマ開発に慣れている方向け）

WordpressテーマはWordpressが用意している関数を使ってPHPで値を呼び出してViewを作成します。ようはPHPを直書きすることもできるのでしっかりルールを作ってテーマを作成しないといわゆるうんこーどといいますか、メンテナンスのしにくいテーマになってしまうので注意が必要です。

テーマ開発環境を作る

それでは、テーマを作っていきましょう。

テーマ用ディレクトリを作る

開発環境のテーマフォルダまで移動し、適当にディレクトリを作成します。

$ cd wp-content/themes/
$ mkdir grunt-press/

rbenv / bundler環境を準備する

作成したディレクトリのrubyバージョンを設定します。

$ rbenv local 2.1.0
$ rbenv local
2.1.0

Gemの準備

このテーマではSassを使うので、bundlerを使ってGemを管理します。まずはGemfileを作りましょう。

$ bundle init
Writing new Gemfile to ... Gemfile

GemfileにSassについて書き加える

Sassの他にSassのMixinライブラリBourbonとgrid frameworkのneatを使います。

$ vi Gemfile
source "https://rubygems.org"

gem "sass"
gem "bourbon"
gem "neat"

Gemをインストール

パスを指定してGemをローカルにインストールします。

$ bundle install --path vendor/bundle

npmの準備

続いて、Grunt環境を作ります。$ npm initでpackage.jsonを作ります。質問形式で情報を入力します。

$ npm init
name: (grunt-press)
version: (0.0.0)
description: grunt wordpress theme development
entry point: (index.js) Gruntfile.js
test command:
git repository:
keywords:
author: author-name
license: (ISC)
About to write to /Users/nukoskitchen/Projects/wordpress.dev.example/vccw/www/wordpress/wp-content/themes/grunt-press/package.json:

{
  "name": "grunt-press",
  "version": "0.0.0",
  "description": "grunt wordpress theme development",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "nukos.kitchen",
  "license": "ISC"
}

Is this ok? (yes) yes

.gitignoreについて

テーマファイルをgitで管理するために.gitignoreを用意しましょう。とりあえずは以下のファイルを除外しておくと良いと思います。必要に応じて追記してください。

$ vi .gitignore
/.DS_Store
/.sass-cache
/node_modules
/bower_components

#bundler
/.bundle
/*.lock
/vendor/bundle

テーマに最低限必要なファイル

Wordpressでテーマを動かすために以下のディレクトリとファイルを作っておきましょう。

.
├── style.css
├── functions.php
├── header.php
├── sidebar.php
├── footer.php
└── index.php

style.css

Wordpressにテーマとして認識させるためにstyle.cssにテーマ情報を記述します。

/*
Theme Name: grunt-press
Theme URI: http://whiskers.nukos.kitchen/
Author: nukos.kitchen
Author URI: http://whiskers.nukos.kitchen/
Description: Grunt Wordpress theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grunt-press
Tags:
*/

Grunt環境の構築

それでは、Sassを動かすためのGrunt環境を作りましょう。

Gruntのインストール

まずは、Gruntをインストールします。

$ sudo npm install -g grunt-cli
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

load-grunt-configのインストール

モジュールとタスクを自動で読み込むためにload-grunt-configをインストールします。

$ sudo npm install -D load-grunt-config
Password:
npm WARN package.json grunt-press@0.0.0 No repository field.
npm WARN package.json grunt-press@0.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)
├── lodash-node@2.4.1
├── grunt@0.4.5 (which@1.0.5, dateformat@1.0.2-1.2.3, 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, exit@0.1.2, nopt@1.0.10, minimatch@0.2.14, glob@3.1.21, lodash@0.9.2, underscore.string@2.2.1, coffee-script@1.3.3, iconv-lite@0.2.11, findup-sync@0.1.3, js-yaml@2.0.5, grunt-legacy-log@0.1.1)
├── jit-grunt@0.7.1
└── load-grunt-tasks@0.3.0 (findup-sync@0.1.3, globule@0.2.0)

自動でモジュールとタスクを読み込む

load-grunt-config用に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-*']
        }
    });
};

パッケージのインストール

今回利用するパッケージをローカルにインストールします。以下に利用するパッケージの一覧を用意しました。この記事では必須のみ利用します。

grunt（必須）
grunt-contrib-sass（必須）
grunt-contrib-watch（必須）
grunt-contrib-clean
grunt-contrib-concat
grunt-contrib-uglify
grunt-img
grunt-notify
grunt-responsive-images
grunt-combine-media-queries
grunt-styledocco

実際に実行するインストールコマンドはこちらです。

$ sudo npm install grunt grunt-contrib-clean grunt-contrib-concat grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-img grunt-notify grunt-responsive-images grunt-styledocco grunt-combine-media-queries --save-dev
Password:

タスクファイルの作成

まずはSass用のタスクファイルを_grunt下に保存します。リリース用とプレビュー用に分けてタスクを記述します。

sass.js

sassは_scssというフォルダにscssファイルを作り、assets/cssの中にはき出します。

module.exports = {
    release: {
        options: {
            bundleExec: true,
            require: ['bourbon','neat'],
            style: 'compressed'
        },
        files: [{
            expand: true,
            cwd: '_scss',
            src: '**/*.scss',
            dest: 'assets/css',
            ext: '.css'
        }]
    },
    prev: {
        options: {
            bundleExec: true,
            require: ['bourbon','neat'],
            style: 'nested'
        },
        files: [{
            expand: true,
            cwd: '_scss',
            src: '**/*.scss',
            dest: 'assets/css',
            ext: '.css'
        }]
    }
}

watch.js

sassを変更する度に実行したいので、watchタスクを作ります。

module.exports = {
    options: {
        livereload: true
    },
    sass: {
        files: [
            '_scss/**/*.scss'
        ],
        tasks: 'sass:prev'
    }
}

Gruntタスクを作る

sassとwatchタスクを呼び出すためにaliases.yamlにGruntタスクを作ります。 $ grunt serveで実行時にプレビュー用のSassで初期化し、後にwatchするように指定します。

serve:
  - 'sass:prev'
  - 'watch'
default:
  - 'serve'

Gruntを実行

最後にタスクが走るかどうか試してみましょう。確認のために_scssフォルダの中に適当にSCSSファイルを作ってCSSを記述してください。

$ grunt serve
Running "sass:prev" (sass) task

Running "watch" task
Waiting...

assets/css/が作成されれば成功です。あとは必要なモジュールやタスクを追加してテーマを開発していくだけです。

（補足）今回作成したディレクトリとファイル

.
├── _grunt
├── _includes
├── _layouts
├── _plugins
├── _scss
├── assets
├── Gemfile
├── Gemfile.lock
├── package.json
├── vendor
├── style.css
├── functions.php
├── header.php
├── sidebar.php
├── footer.php
└── index.php

シリーズ

Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」
Vagrantの最初の一歩
GruntでWordpressテーマの開発環境を作る

Gruntでhologramを使う

2015-02-09
Jekyll, Grunt

Jekyll × Gruntでブログを作ってみた：まずはJekyllだけ動かしてみる

2014-10-02
Grunt, Jekyll

Jekyll × Gruntでブログを作ってみた：NodeモジュールとGruntタスク

2014-09-26
Grunt, Jekyll

nodebrewを使ったnode.jsのバージョン管理（Mac）

2014-09-25
Node.js, Grunt

Jekyll × Gruntでブログを作ってみた：環境構築編

2014-08-18
Grunt, Jekyll