How to Build

Git Clone

まずはHonokaのリポジトリをローカル上にクローンします。

% git clone https://github.com/windyakin/Honoka.git
% cd Honoka

Install Program and Package

ビルド環境を使用するためには以下のプログラムとパッケージが必要です。なお説明の際に記述しているバージョンはこのページを執筆している時点(2015年11月)の安定版・最新版のバージョンです。

• Node.js
  • Grunt
  • Bower
• Ruby
  • Bundler
  • Sass, scss_lint etc...

Node.js

Node.js 本体のインストール

• Node.js - v4.2.x

基本的にはNode.jsのページからインストーラーをダウンロードし、インストールすることで使用できるようになります。

% node --version
v4.2.2

備考

Node.js はリリース間隔が短いため、インストーラからインストールしているとバージョンアップが面倒になることがあります。必要に応じて nodebrew や nodist などからインストールをしてください。

Node.jsのパッケージのインストール

• npm

一般的に Node.js のパッケージ管理には npm を使用します。npm 本体は Node.js をインストールした際に自動的に入っているはずです。

% npm --version
3.3.12

また、npm からインストールするパッケージは package.json に書いてあるので、 以下のコマンドにより一括でインストールできます。

% npm install

Gruntのインストール

• Grunt

タスクランナーには Grunt を使用しています。 Grunt そのものが npm を通じて配信されているので、 package.json にもインストールをするように記述してありますが、ここではコマンドラインから直接利用できるようにするために、別途 -g オプションを指定しインストールを行います。

% npm install -g grunt-cli
% grunt --version
grunt-cli v0.1.13
grunt v0.4.5

Bowerのインストール

• Bower

jQueryをはじめとするコンポーネントのインストールには Bower を利用しています。これもGruntと同じくコマンドラインから直接利用できるようにするために、 npm から -g オプションを指定してインストールを行います。

% npm install -g bower
% bower --version
1.6.5

Bower からコンポーネントをインストールする処理は既に Grunt でタスクが定義されています。

Ruby

Ruby本体のインストール

• 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 を使用すると便利です。

Bundlerのインストール

Rubyのパッケージ管理システムは RubyGems ですが、プロジェクトごとに異なるバージョンのパッケージを利用したい場合に色々な不都合が生じます。そこで、パッケージの管理には Bundler を使用します。 Bundler 本体は RubyGems を使ってインストールします。

% gem --version
2.4.5.1
% gem install bundler
% bundle --version
Bundler version 1.10.6

Rubyの各種パッケージのインストール

Bundler をインストールしたら各種パッケージをインストールします。インストールするパッケージとバージョンは Gemfile に記述されているので以下のコマンドによって一括でインストールが行えます。

% bundle install --path vendor/bundle

これで vendor/bundle/ 以下に必要なRubyのパッケージ類がインストールされます。 Bundler を使ってインストールしたパッケージは bundle exec [***] で使用することができるはずです。

ここでは試しにSassコンパイラを起動してみましょう。

% bundle exec sass --version
Sass 3.4.19 (Selective Steve)

これで一通り必要なプログラムとパッケージが揃いました。

Build

それでは早速Honokaをビルドしてみることにしましょう。

ビルドに関する一連の流れは Grunt によって定義されています。ビルドするための Grunt タスクは以下になります。

% grunt build

実行するとなんやかんやとメッセージが出てきます。途中でエラーがなければビルド完了です。生成されたCSSは dist/css/ 以下に出力されます。

出力されるファイル

• bootstrap.css
  • SCSSファイルからビルドされたCSS
• bootstrap.min.css
  • bootstrap.css からインデントなどを削り、ファイルサイズを圧縮したCSS

また、ビルドタスクでは本家Bootstrapから、フォントファイルやJavaScriptファイルなども取得し、それぞれ dist/fonts/ と dist/js/ 以下にコピーされるようになっています。実際の運用の際にはこれらのファイルもサーバー上にアップロードしてください。