制作環境を整えるステップのメモ

制作環境を整えるステップのメモ

XAMPPやMAMPを入れて、Compassをインストール、SassをCSSにコンパイル出来るようにするまでのローカル環境構築を、Windowsの場合とMacの場合の両方をメモしておこうと思います。
場合によってはGitを入れたりする事もあると思うけど、今回はとりあえずここまでです。

1.XAMPP または MAMP をダウンロードする

WindowsならXAMPP、MacならMAMPをダウンロードする。Macでも好みによってはXAMPPを利用するのももちろん有り。

2.Vertual Hostの設定とhostsへの追記

http://hoge.localhost/でアクセス出来るようにVertual Hostの設定とhostsへの追記をする。

Vertual Host

XAMPPはhttpd-vhosts.confを編集。場所はC:\xampp\apache\conf\extra
MAMPはhttpd.confを編集。場所はMAMP/conf/apache

hosts

hostsにドメイン名を記述。WindowsはC:\WINDOWS\system32\drivers\etcにあり、Macは/private/etc/にある。

設定の方法は過去記事参照MAMPでVirtualHostを設定する

3.Rubyのインストール

Windowsは標準でRubyが入っていないのでRubyInstallerからダウンロードしてきてインストール。コマンドたたいてインストールの確認をする。

ruby -v 

4.Compassのインストール

コマンドラインよりインストール。

gem update --system
gem install compass 

プロキシ越しの場合

gem install compass -r -p http://proxy.hoge.jp:ポート番号 

インストールの確認

compass -v

5.Compassの設定

config.rbを作成

該当ディレクトリにconfig.rbの名前でファイルを作成し、下記を記述。

http_path = "/"
css_dir = "shared/css"
sass_dir = "shared/sass"
images_dir = "/"
javascripts_dir = "shared/js"
output_style = (environment == :production) ? :compressed : :expanded
line_comments = (environment == :production) ? :false : :true

CSSやSASSのパスなどは環境によって変更

バッチファイルの作成

sassファイルの変更を監視するバッチファイルを作成。
開発環境用はexpanded形式、本番環境用はcompact形式でコンパイルする。
拡張子はWindows用は.batでMac用は.command

Windows

本番.bat

compass watch -e production

開発.bat

compass watch

Mac

本番.command

#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch -e production

開発.command

#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch

以上でとりあえずWordpressやMovable TypeをローカルにインストールしてSassを使って制作する環境が整う。