制作環境を整えるステップのメモ
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を使って制作する環境が整う。