How to Build
まずはHonokaのリポジトリをローカル上にクローンします。
% git clone https://github.com/windyakin/Honoka.git
% cd Honoka
ビルド環境を使用するためには以下のプログラムとパッケージが必要です。なお説明の際に記述しているバージョンはこのページを執筆している時点(2015年11月)の安定版・最新版のバージョンです。
- Node.js
- Grunt
- Bower
- Ruby
- Bundler
- Sass, scss_lint etc...
- Node.js - v4.2.x
基本的にはNode.jsのページからインストーラーをダウンロードし、インストールすることで使用できるようになります。
% node --version
v4.2.2
Node.js はリリース間隔が短いため、インストーラからインストールしているとバージョンアップが面倒になることがあります。必要に応じて nodebrew や nodist などからインストールをしてください。
一般的に Node.js のパッケージ管理には npm を使用します。npm 本体は Node.js をインストールした際に自動的に入っているはずです。
% npm --version
3.3.12
また、npm からインストールするパッケージは package.json に書いてあるので、 以下のコマンドにより一括でインストールできます。
% npm install
タスクランナーには Grunt を使用しています。 Grunt そのものが npm を通じて配信されているので、 package.json にもインストールをするように記述してありますが、ここではコマンドラインから直接利用できるようにするために、別途 -g オプションを指定しインストールを行います。
% npm install -g grunt-cli
% grunt --version
grunt-cli v0.1.13
grunt v0.4.5
jQueryをはじめとするコンポーネントのインストールには Bower を利用しています。これもGruntと同じくコマンドラインから直接利用できるようにするために、 npm から -g オプションを指定してインストールを行います。
% npm install -g bower
% bower --version
1.6.5
Bower からコンポーネントをインストールする処理は既に Grunt でタスクが定義されています。
- Ruby - v2.2.3
Sassのコンパイルや構文チェック(Linter)にはRubyを使用します。
% ruby --version
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin14]
OS Xやその他Unix/Linux系OSを使用している場合には、Rubyのバージョン管理が容易に行える rbenv を使用すると便利です。
Rubyのパッケージ管理システムは RubyGems ですが、プロジェクトごとに異なるバージョンのパッケージを利用したい場合に色々な不都合が生じます。そこで、パッケージの管理には Bundler を使用します。 Bundler 本体は RubyGems を使ってインストールします。
% gem --version
2.4.5.1
% gem install bundler
% bundle --version
Bundler version 1.10.6
Bundler をインストールしたら各種パッケージをインストールします。インストールするパッケージとバージョンは Gemfile に記述されているので以下のコマンドによって一括でインストールが行えます。
% bundle install --path vendor/bundle
これで vendor/bundle/ 以下に必要なRubyのパッケージ類がインストールされます。 Bundler を使ってインストールしたパッケージは bundle exec [***] で使用することができるはずです。
ここでは試しにSassコンパイラを起動してみましょう。
% bundle exec sass --version
Sass 3.4.19 (Selective Steve)
これで一通り必要なプログラムとパッケージが揃いました。
それでは早速Honokaをビルドしてみることにしましょう。
ビルドに関する一連の流れは Grunt によって定義されています。ビルドするための Grunt タスクは以下になります。
% grunt build
実行するとなんやかんやとメッセージが出てきます。途中でエラーがなければビルド完了です。生成されたCSSは dist/css/ 以下に出力されます。
-
bootstrap.css- SCSSファイルからビルドされたCSS
-
bootstrap.min.css-
bootstrap.cssからインデントなどを削り、ファイルサイズを圧縮したCSS
-
また、ビルドタスクでは本家Bootstrapから、フォントファイルやJavaScriptファイルなども取得し、それぞれ dist/fonts/ と dist/js/ 以下にコピーされるようになっています。実際の運用の際にはこれらのファイルもサーバー上にアップロードしてください。