Grunt、Vagrantなどの制作作業を効率化するツールがいろいろとでてきていますね。存在はしっていたものの、今の環境で著しく不便を感じているわけでは無いし、面倒だし…と手を出さずにいたのですが、OS Xでの環境構築について手順をまとめてくださっている記事があったので、通してやってみました。
上記の記事を見て一通り設定はできたのですが、GruntやCompassの設定に戸惑ってしまいました。設定作業中もいくつかエラーが出たりしたので、そのあたりも考慮して僕の行った環境構築の手順についてまとめてみました。僕のようにまだこのあたりのツールに興味はあるけど手を出していないという方は参考にしてみてください。
もろもろをインストールする
Xcode
まず、AppStoreからXcodeをインストールします。コマンドラインツールも必要なので、下記のコマンドでインストールします。
xcode-select --install
homebrew
homebrewはOS X用のパッケージ管理ツールです。僕は気づいたときには入っていましたが、入っていない場合もあるかもしれないので、下記で確認・インストールします。
# 確認
$ brew -v
# 入ってなかったらインストール
$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)"
# 最新のバージョンに更新
$ brew updage
$ brew upgrade
$ brew cleanup
# エラーがないか確認
$ brew doctor
僕はここで大量のWarningが…。全て解消させないとhomebrewを正しくインストールできませんので、1つずつ確認して修正していきます。僕の環境ででた主なエラーと解決方法をまとめておきます。
# なんかいっぱいエラーでるので直す
Warning: パス isn't writable.
# 書き込み権限を付与する
$ sudo chown -R ユーザー名 パス
Warning: gettext was detected in your PREFIX.
# gettextがhomebrew以外でインストール済み。とりあえずbrewの管理から外す
$ brew unlink gettext
Warning: Unbrewed dylibs were found in パス
# Unexpected files: として不要なファイルが羅列されるので全て削除する
rm -rf ファイル名
Warning: Broken symlinks were found. Remove them with `brew prune`:
# 壊れたシンボリックリンクがある。下記コマンドで解消させる
$ brew prune
brew doctor でエラーが出なくなればOKです。
Node.js
Node.jsも僕の環境では既に入っていましたが、入っていない場合もあるかもしれないので、下記で確認・インストールします。
# 確認
$ node -v
# なければインストール
$ brew install node
Grunt
下記のコマンドでGruntをインストールします。
$ npm install -g grunt-cli
Sass、Compass
Sass、Compassはruby gemというRubyのパッケージ管理システムで管理するので、まずはruby gemをインストールします。例によって僕の環境には既に入っていましたが、確認して入っていなかったらインストールしてください。
# 確認
$ ruby -v
# なかったらインストール
$ sudo gem install rubygems-update
$ sudo update_rubygems
# Sassインストール
$ sudo gem install sass
$ sass -v
# Compassインストール
$ sudo gem install compass
$ compass -v
上記でうまくいくはずなのですが、僕の場合は既に入れていたSassと新しく入れようとしたCompassのバージョンの相性が悪くエラーが出てしまいました。その場合は一旦両方削除してインストールし直すと良いようです。
# エラーが出た
/Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb:135:in `require': cannot load such file -- sass/script/node (LoadError)
# 両方共削除して再度インストール
$ sudo gem uninstall sass compass
$ sudo gem install sass compass
wp-cli
wp-cliはコマンドでWordPressの操作をすることができるツールです。Gruntの実行には関係ありませんが、WordPressの開発に便利なので一緒にいれておきます。
$ curl https://raw.github.com/wp-cli/wp-cli.github.com/master/installer.sh | bash
# .bash_profileにパスを通してくださいと出るので、出たメッセージ通りに貼り付け
$ vi .bash_profile
# WP-CLI directory
export PATH="/Users/inc/.wp-cli/bin:$PATH"
export WP_CLI_PHP=/Applications/MAMP/bin/php/php5.3.14/bin/php
Vagrant + VCCW
Vagrantは単一のファイルを用意するだけで、コマンドから仮想環境を簡単に立ち上げることができるようになるツールです。様々な環境のVagrantファイルが公開されており、WordPress用にもVCCW（vagrant-chef-centos-wordpress）というVagrantファイルが公開されています。
僕の普段の開発環境はMAMPですが、ちょっとしたテストにはVagrant + VCCWを使っています。詳細な説明は公式サイトを見て頂くとして、基本的なインストール方法を紹介しておきます。
VirtualBox、Vagrantのインストール
下記からインストーラーをダウンロードしてインストールします。
Vagrantプラグイン、VCCWのインストール
VirtualBoxとVagrantのインストールができたら、VCCWと、必要なVagrantプラグインをインストールします。
# Vagrant確認
$ vagrant ―version
# Vagrantプラグインインストール
$ vagrant plugin install vagrant-hostsupdater
# VCCWをGitHubからclone（例として vagrant-wpディレクトリに保存）
$ git clone https://github.com/miya0001/vagrant-chef-centos-wordpress.git vagrant-wp
VCCWをダウンロードしたvagrant-wpディレクトリに移動し、設定ファイルを設定して立ち上げます。
$ cd vagrant-wp
# 設定ファイルをコピー。書き換えることでいろいろ設定できます。
$ cp Vagrantfile.sample Vagrantfile
$ vi Vagrantfile
# 起動!
$ vagrant up
# 終了!
$ vagrant halt
バージョンアップ用シェルスクリプト
これまでのステップでインストールした各ツールのバージョンアップを楽にするために、バージョンアップ用のシェルスクリプトを作成します。これでコマンド一発で全てのツールをバージョンアップできるようになります。
$ vi update_brew.sh
#! /bin/bash
# Homebrew
echo -e "\n####### Homebrew Update #######\n"
brew update
brew upgrade
echo -e "\n####### Homebrew Clean Up #######\n"
brew cleanup
echo -e "\n####### Homebrew Check #######\n"
brew -v list
brew doctor
# WP-CLI
echo -e "\n####### WP-CLI Update #######\n"
cd ~/.wp-cli
php composer.phar self-update
php composer.phar require 'wp-cli/wp-cli=@stable'
cd ~
# Ruby
echo -e "\n####### Ruby #######\n"
ruby -v
# RubyGem
echo -e "\n####### RubyGem #######\n"
sudo update_rubygems
sudo gem update
echo -e "\n####### gem clean #######\n"
sudo gem clean
echo -e "\n####### gem list #######\n"
gem list
# npm
echo -e "\n####### node.js npm Update #######\n"
sudo npm update -g grunt grunt-cli grunt-init
echo -e "\n####### node.js version #######"
node -v
echo -e "\n####### grunt-init version #######"
grunt-init --version
echo -e "\n####### grunt version #######"
grunt --version
# Vagrant plugin
echo -e "\n####### Vagrant plugin Update #######\n"
vagrant plugin update vagrant-hostsupdater
vagrant plugin update vagrant-global-status
echo -e "\n####### Vagrant plugin List #######\n"
vagrant plugin list
$ chmod 700 update_brew.sh
# 実行
./update_brew.sh
Gruntの実行
Gruntを適用するには、まず、必要なGruntプラグインをインストールしたり設定ファイルを作成したりする必要があります。これらの作業はコマンドで自動的に行わせることができるようになっています。1つずつコマンドを実行しても良いのですが、Gruntは各プロジェクトごとに設定ファイルが必要であるため、シェルスクリプト化して使い回せるようにしておくと便利です。ここでは例としてSass・Compassの自動コンパイルが行えるようにしてみます。
# Compassの設定ファイルを用意（とりあえずの例です。詳細は調べてみてください。）
$ vi config.rb
# プロジェクトルート
http_path = "/"
# CSSファイル出力ディレクトリ
css_dir = "css"
# Sassディレクトリ
sass_dir = "scss"
# 画像ディレクトリ
images_dir = "images"
# jsディレクトリ
javascripts_dir = "js"
# 出力するCSSのスタイル（:compressed = 圧縮版の出力）
output_style = :compressed
# Grunt環境作成用のシェルスクリプトを作成
$ vi gruntinit.sh
npm init
npm install --save-dev grunt grunt-contrib-compass grunt-contrib-watch
$ chmod 700 gruntinit.sh
# Gruntfile.js（設定ファイル）を作成
$ vi Gruntfile.js
module.exports = function(grunt) {
// load task
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
// Project configuration.
grunt.initConfig({
// compassの設定
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
// 監視内容
watch: {
scss: {
files: ['scss/*.scss'],
tasks: ['compass']
}
}
});
// Default task
grunt.registerTask('default', ['watch']);
};
# Gruntプロジェクトの構築を実行。いろいろ聞いてくるので適当なものを入力。
$ ./gruntinit.sh
# Grunt実行（ファイル監視）
grunt
成功すると「Running “watch” task」的なメッセージが表示されるはずです。表示されていない場合は、何らかのエラーの可能性がありますのでメッセージを確認して修正してみてください。
参考
次に向かったのは名古屋名物ひつまぶしのお店、しら河。ひつまぶしを食べるのは初めてでしたが、外はカリッと、中はふわっとした食感でとても美味しかったです。1杯目は普通に、2杯目は薬味を添えて、3杯目はお茶漬けにという真っ当な食べ方で堪能しました。
で、なんと僕はこの場で LT をさせていただきました。WordCamp 開催前、「懇親会でのLT申し込みは本日まで」というツイートを見かけ、締め切りぎりぎりまで申し込むか、内容をどうするかで悩み、結局いいネタも浮かばぬまま、まぁどうせ落ちるだろうし「自作プラグインの紹介させてください」でいいやーと応募したところ、何の間違いか当選してしまったのでした。相当応募者が少なかったんだろうなーと思っていたのですが、当日スタッフの方にお伺いしたところ、それなりの応募があったみたい。とても緊張したし、ネタもゆるゆるだったけど、参加して良かったです。僕は楽しかったです。