Aptana Studio3にSass+compassをインストール
とりあえず、こちらを参考にインストール
Sass+compassをEclipse環境にインストール | code up
Aptana Studio3のインストール
簡単なのでここではスルー。
Rubyの最新版をDLしてインストール
rubyinstaller-2.2.2-x64.exeをDLしてきて実行。
実行ファイルへ環境変数PATHを設定する
のチェックは入れること。
数秒でインストール完了。
cmdでコマンドプロンプト立ち上げて、
> ruby -v
でバージョンの表示がされたのでインストール完了。
アップデートかける
> gem update --system
インジケーターやローディングがないしメッチャクチャ停止時間が長かったのでデザイナーはビビると思う。
Sassのインストール
> gem install sass
compass/Sassプロジェクトを作成する
そんなに難しいことじゃあなかったので、簡単に。
うちの開発環境ではC:\gitにサイトごとにドメイン名でディレクトリ切ってたので、コマンドプロンプトで該当のディレクトリまで移動する。
それで、compass createコマンドを叩く。
> compass create --sass-dir "common/sass" --css-dir "common/css" --javascripts-dir "common/js" --images-dir "common/images"
cssやjs、imagesなどのファイルはcommonに収めるというルールでやってたプロジェクトなのでダブルクオーテーション内のディレクトリ指定は/で切って二層先を指定した。
それで、出来上がったのが以下の構成
/config.rb
/.sass-cache
/common/sass/ie.scss
/common/sass/print.scss
/common/sass/screen.scss
/common/css/ie.css
/common/css/print.css
/common/css/screen.css
/common/js/
/common/images/
build.xmlを作る
Code UPさんとこのソースをコピーして、必要なところを書き換える。
<?xml version="1.0" encoding="utf-8" ?>
<project name="webproject" default="compass" basedir=".">
<property name="ruby.bin" value="C:\Ruby22-x64/bin" />
<target name="compass">
<exec executable="${ruby.bin}/ruby" dir=".">
<arg value="${ruby.bin}/compass" />
<arg value="compile" />
<arg value="-s" />
<arg value="expanded" />
</exec>
</target>
</project>2行目のproject nameは適宜書き換える
3行目の C:\Ruby22-x64/bin をrubyのインストールフォルダに書き換える。
2行目、5行目のbasedirとdirは"."でいいっぽい。
圧縮周りのオプションは後で触ります。
ファイルはプロジェクトのrootに置く。
Ant pluginをAptana studio3にインストール
ここを参考にする
Gaurav S Tomar: Installing Ant plugin in Aptana Studio
1) Go to; Help >> Install New Software
2) In the next window click on this entry: Eclipse Galileo Repository - http://download.eclipse.org/releases/galileo
3) Select the Programming Languages >> Eclipse Java Development Tools
4) Next and FinishAfter finishing installation, you can check Ant @ Window>> Show View>> Other
If you still unable to install, feel free to comment.
けども、2015年5月現在。galileoではなくindigoが現行バージョンのようなので「選ぶURLが無い！」と騒がないｗ
ウインドウ右下のインジケーターが終わって、インストール終了したらAptana再起動。
WorkSpaceでエラーが出るけど、キャンセルして続行。
起動したら Window > Show View > Other で開いていくとAntが追加されているので開く。
Ant buildの実行
Aptana studio3のApp ExplorerやProject Explorerでbuild.xmlを右クリック、Run As > Ant Build を実行の前に External Tools configurationsを押す。
デフォルトでワークスペース全体をビルドしてくれるのがいい迷惑で、複数プロジェクトがあるといつまで経っても終わらないからbuildの範囲を制限する。
- Nameは適当な名前でいいらしいので、compass
- Buildfileはbuild.xmlをから選択
- Base Directoryは、プロジェクトのrootをから選択
- タブを切り替える前には押す
- RefreshタブでRefresh resources upon completioin.にチェックを入れて、
Specific Resourcesを選択、を押してRefreshしたいプロジェクトにチェックを入れる
- Buildタブもチェックを入れてから、Specific Resourcesを選択、
を押してBuildしたいプロジェクトにチェックを入れる
- を押したらBuild実行
問題なければConsoleにログが出て完了
Buildfile: C:\git\hogehoge.com\build.xml
compass:
BUILD SUCCESSFUL
Total time: 1 second
Ant builderの作成
Project > Properties > Builders
New > Ant Builder
後は、上でやったことと同じように設定
buildする時は、Project > Build Projectで実行するなり、Build AllするなりすればOK。
自分は、ペーストする時に間違ってctrl+Bを押してしまうので、 Window > Preferences > General > Keys でBuild Allのショートカットは外したｗ
