Grunt + Sass + Compassでつくるナウいフロントエンド開発環境

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」的なメッセージが表示されるはずです。表示されていない場合は、何らかのエラーの可能性がありますのでメッセージを確認して修正してみてください。

参考

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく