WordPressのテーマ開発を自動化してくれて楽にしてくれるiemotoの環境構築の備忘録

iemotoとは

これは、WordPressテーマ用の grunt-init テンプレートです。
Grunt を使うとWordPressテーマを開発する上で必要な様々なプロセスを自動化することができます。
https://github.com/megumiteam/iemoto

とのこと。
grunt-initという聞きなれない単語が出てます。

grunt-initとは

Gruntにはgrunt-initというscaffold機能が備わっています。

これはテンプレートを元に、Web制作、Nodeでの開発、プラグイン制作など、様々な用途の雛形を作成できる機能です。テンプレートはオフィシャルでも公開されていますし、独自でカスタマイズしたものを使うこともできます。
http://www.september-creator.com/2013/06/grunt-init/

とのこと。
要はテンプレートを元に、なんらかの雛形を作成してくれるみたいです。
そしてGruntというものの1機能みたいですね。

Gruntとは

Gruntとは、先ほど紹介したような自動化のためのビルドツール(タスクランナー)です。
Node.jsを使用し、ビルド用のスクリプト(Gruntfile.js)をJavaScriptで記述してタスクを定義します。
http://www.atmarkit.co.jp/ait/articles/1403/04/news020.html

とのこと。
GruntはJavaScriptで記述したタスクを順番に処理してくれるものらしい。
Gruntを利用するにはNode.jsというのが必要みたいですね。

Node.jsとは

これまで、Webアプリケーションの制作で主流だったのはPHPやPerl、ASP.NETなどのプログラミング言語だった。もちろん、JavaScriptも広く普及はしているが、これらは主にクライアントのローカルPC上でサービスを提供するために用いられることが多く、サーバサイドのWebアプリケーション開発に用いられることはあまりなかった。

しかし最近、この状況が変化しつつあり、サーバ側の実装にもJavaScriptが用いられる例が増えてきた。当然理由がある。それはNode.js 【01】の開発が進んできたことにより、JavaScriptを活用したWebサイトがC10K問題と無縁になりつつあるためだ。

http://www.mdn.co.jp/di/articles/2659/?page=3

とのこと。
今までブラウザーで動いていたJavaScriptをサーバー側で動かす為の便利なものらしい。

サーバ言語はPHP? JAVA? node.js?
https://qixil.jp/q/802

サーバー側で動かしていたプログラム言語としてはPHPなどが有名ですが、それをJavaScriptでも動かせれるよってことみたいですね。

WEBアプリケーションの開発もNode.jsで出来ちゃうみたいです。
話しがそれましたが、iemotoを使うのに、
  • Grunt-initが必要
  • Grunt-initはGruntの1機能みたいなので、Gruntが必要
  • GruntはNode.jsを利用するみたいなので、Node.jsが必要

みたいです。
では、上記の必要なものを下から順に揃えていきましょう。

環境構築

Node.jsをインストール

まずはさくっとNode.jsをインストールしましょう。
MacとWindows環境ではインストーラーがあるので、それを使ってインストールができます。
参考:http://www.tettori.net/post/293/

追記:2014/08/28
iemotoを開発された宮内さんからNode.jsのインストールはインストーラーを使うよりHomebrewを使うと良いとアドバイスを頂きましたので追記します。

まずは、Homebrewを更新します。

brew update
brew upgrade

次にNode.jsをインストールします。

brew install node

Gruntをインストール

こちらが分かりやすく解説してくれてます。
http://www.september-creator.com/2013/06/grunt-init/

grunt-initはGruntのversion0.4からは、grunt-cliとは別に独自にグローバルインストールするようになりました。 ですのでgrunt-cliは別途インストールが必要です。

まず、Gruntを一度もグローバル・インストールしていない場合は、まずgrunt-cliをインストールします。旧バージョン(〜v0.3)のGruntをグローバル・インストールしている場合は一度アンインストールします。ともにnpmを使います。

古いGruntがインストールされてるなら、1度アンインストールして、grunt-cliをインストールします。

まずは古いGruntがインストールされているなら、アンインストールします。
※インストールされているかわからない場合は、とりあえず以下のコマンドを打てばインストールされていればアンインストールされます。

npm uninstall -g grunt

次にgrunt-cliをインストールします。

npm install -g grunt-cli

これでGruntがインストールされました。
npmとは(Node Package Manager)の略です。上記でNode.jsをインストールしたときに一緒にインストールされてるみたいです。

grunt-initのインストール

npm install -g grunt-init

これでインストール完了。

grunt-initテンプレートのiemotoをダウンロード

まずは、テンプレートを保存しておくディレクトリを作成。

mkdir ~/.grunt-init

次に、gitからiemotoテンプレートをダウンロード

git clone git@github.com:megumiteam/iemoto.git ~/.grunt-init/iemoto

これで環境構築は終了です。

iemotoの使い方についてはiemotoのReadmeを参照ください。

https://github.com/megumiteam/iemoto

WordPressのテーマ開発を自動化してくれて楽にしてくれるiemotoの環境構築の備忘録

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です