WHY USE IT?
ページのロードを高速化して、ユーザーを幸せにするよ
WHAT IT DOES?
- Javascriptを結合して圧縮(yui compressorを使用する)
- HTMLインラインで書かれているCSSを@importで置き換える
- CSSを結合して縮小する
- JPGとPNGを最適化する(jpegtran & optipng)
- 無駄なコードを削除してくれる(console.log, profiling,test suite)
- HTMLの圧縮 (htmlcompressor)
- キャッシュマニフェストの自動生成
- htmlタグにリンクを貼ってくれる
- プロジェクトのconfigファイルでON/OFFができる
- ファイル名を変更することで、重いキャッシュを使えるようにあんる
- .htaccessの更新（重いキャッシュを使えるようになる)
- HTMLのリンクを新たに圧縮・最適化されたCSS・JSファイルにリンク置き換え
- 開発バージョンの代わりに再軽量のJQueryを使うようにupdate
- HTMLから使われていないファイルを削除
- コード品質ツールをオプションで走らせる
端的に言うと
ページが爆速になる.下の図は、ページのサイズ（いかにも怪しいけどもそういうことらしい)
http://html5boilerplate.com/img/chart.pngから抜粋
QUICKSTART GUIDE
*nix系
sudo apt-get install ant-contrib
sudo port install ant-contrib
sudo yum install ant-contrib
etc...
windows系
無視!
USING THE BUILD SCRIPT
- プロジェクトコードをダウンロード
- ビルドスクリプトの置いてあるディレクトリに移動
- ant build
- publishディレクトリに最適化されたファイルがあるよ！
オプションなど
ant build # minor html optimizations (extra quotes removed). inline script/style minified (default)
ant buildkit # all html whitespace retained. inline script/style minified
ant basics # same as build minus the basic html minfication
ant minify # same as build plus full html minification
ant text # same as build but without image (png/jpg) optimizing
設定ファイル
- 基本的なプロジェクト設定は,default.properties
- build.xmlをいじる必要があるかも
- いくつかのスタイルシートを作って１つに結合したければ、project.propertiesに書けばやってくれるよ
- 圧縮したいファイルは、以下の二行を初めと終わりに書いておくと自動的に圧縮してくれるよ。
<!-- scripts concatenated and minified via ant build script-->
スクリプト達<!-- end scripts-->
- もし圧縮したくなければ、２つの行の外側にリンクを貼っておこう
HERE IS HOW THE ENVIRONMENTS WORK
- dev
- test
- prod
基本的なお仕事
ビルドスクリプトを使うことになるほぼ大体のプロジェクトは、ビルドスクリプトからファイルを追加・削除・移動が必要になるでしょう
- もし、簡単なことだったら、build/configのproject.propertiesをいじっておくと幸せかもよ
MOVING AND RENAMING FOLDERS
もし、cssからstylesにCSSディレクトリを変更したければ以下のようにpropertiesを変更：
# Directory Structure
#
# Override any directory paths specific to this project
#
dir.css = styles
アプリケーションコードから、分離したければ、以下のように設定しておくといいよ
# Directory Structure
#
# Override any directory paths specific to this project
#
dir.js = _assets/js
dir.css = _assets/css
dir.images = _assets/images
CONFIGURE DEEP NESTED FILES
SUPPORT FOR MODULES
RUNNIG JSHINT AND JSLINT
オプションとして、JSHintとJSLintを使って、（潰せる)潜在的なバグは潰しておくこともできる
ant build jshint
ant build jslint
- project.propertiesに書いておけば自動化できる
JSHINT:http://jshint.com/
JSLINT:http://www.jslint.com/lint.html
RUNNING CSSLINT
CSSも、潜在的なバグを潰しておけるスクリプトがあると（バグがあるので要注意)
ant build csslint
ビシバシ使おう
依存関係
MAC
port install jpeg optipng
UBUNTU
apt-get install libjpeg-progs optipng