キタジマタカシ 
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の開発に便利なので一緒にいれておきます。
# homebrew で php をインストールしていない場合エラーがでるっぽいので、その場合は下記も実行 # $ brew install PHP54 $ brew tap josegonzalez/homebrew-php $ brew install wp-cli
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 # 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」的なメッセージが表示されるはずです。表示されていない場合は、何らかのエラーの可能性がありますのでメッセージを確認して修正してみてください。
