Sassでコンパイルできる環境と、生成された CSS をWebブラウザで localhost として参照できるようになるところまで。
サーバサイドのことをよく知らない人用。
scss ファイルはすでにチームメンバーが git にコミットしていて、新たなメンバーが参入し、開発環境を構築する、という状況を想定してます。
インストールするものは3つ。
- Ruby
- Sass
- Nginx（ApacheでもOK）
Ruby をインストール
Ruby-1.9 から RubyGems（後述）が標準付属となったため、1.9 以上をインストールする。今回は安定版の Ruby 1.9.3-p392 をダウンロード
http://rubyinstaller.org/downloads/
インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。
コマンドプロンプト起動
Windows のショートカットキー Windowsキー + R で、「ファイル名を指定して実行」を開き、cmd と入力するとコマンドプロンプトが開く。
下記のように Ruby のバージョンが表示されればインストールOK。
>ruby -v
ruby 1.9.3p392 (2013-02-22) [i386-mingw32]
Sass インストール
ここから Ruby に付属してるパッケージ管理ソフトの RubyGems を使う。Windows OS は文字コードが Shift_JIS なので、あらかじめ UTF-8 指定しておく（通常、RubyGemsを更新するときだけで良いはず）。
>set LANG=ja_JP.UTF-8
RubyGems を更新。
>gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.0.3.gem (100%)
Successfully installed rubygems-update-2.0.3
Installing RubyGems 2.0.3
RubyGems 2.0.3 installed
Installing ri documentation for rubygems-2.0.3
RubyGems から Sass をインストール。
>gem install sass
Fetching: sass-3.2.9.gem (100%)
Successfully installed sass-3.2.9
Installing ri documentation for sass-3.2.9
scssファイルのコンパイル
git から clone したコンテンツファイルのプロジェクトが下記ディレクトリにあるとする。
D:\git\ui-project
scss ファイルは下記ディレクトリにあるとする。
D:\git\ui-project\resources\css\scss
CSS ファイルは下記ディレクトリに生成されるものとする。
D:\git\ui-project\resources\css
scss ファイルのディレクトリに移動してコンパイル開始
>D:
>cd git\ui-project\resources\css\scss
>sass --watch scss:.
CSS が生成されていることを確認。
Nginx をインストール
用途は CSS ファイルをローカル環境上で公開することなので、どのバージョンでも大丈夫。最新の nginx/Windows-1.5.0 をダウンロード。
http://nginx.org/en/download.html
ZIPを解凍。今回はDドライブ直下に配置する。
コマンドプロンプトから起動する。
起動
>D:
>cd nginx-1.5.0
>start nginx
ブラウザのアドレスバーに localhost と入力してアクセスできることを確認。
この HTML は D:\nginx-1.5.0\html\index.html にあります。
停止
>nginx -s stop
コマンドのヘルプ
>nginx -h
設定ファイル編集
D:\nginx-1.5.0\conf\nginx.conf をテキストエディタで開く。
下記のように書いてある部分に注目する。
これは http://localhost の "/"（ルートディレクトリ）のコンテンツは、ローカルPC上の <Nginxインストールディレクトリ>/html ディレクトリ配下にコンテンツがあるよという意味。
location / {
root html;
index index.html index.htm
}
これと同じ要領で、上記設定の下部に以下を追記する。
http://localhost/resources がローカルPC上の D:\git\ui-project 配下にあるよという意味。
location /resources {
- root D:\git\ui-project\resources;
+ root D:\git\ui-project;
}
Nginx を再起動するか、リロードして設定ファイルを読み込みなおす。
>nginx -s reload
ブラウザのアドレスバーに http://localhost/resources/xxx.css を入力。xxx.css の部分は、コンパイルによって生成された CSS ファイルを書く。
アクセスできるようになってることを確認する。