jQueryのビルド法まとめ。

eyecatchImg

jQueryのバージョンアップから一ヶ月が経ちますね。今回API仕様は変わりませんでしたが、カスタムビルドがパワーアップしたり、sizzleも早くなったりとドキドキな更新が行われた訳です。中でもbowerを利用したバージョン管理も目玉の一つですね。これで最新版に置き換えたり戻したり…といった動作を、効率的に行えるようになりました。

カスタムビルド

以前からついていた機能でしたけど、より細かく設定できるようになりました。これで余計なAPIを削ってjQuery自身を軽くすることができますね。細かい事はGitHubのREADME.mdに書いてあります。

バージョン管理と圧縮による利点

もちろん最新版を保つためCDNsを利用するのも良いですが、元々ファイル自体は利用するサーバから読み出していると考えると、カスタムビルド出来るのであれば利用サーバから読み出さない手はありません。

なにより今回sizzleも削れる(内部的にはquerySlectorAlljQueryオブジェクトを生成するものに置き換わるらしいです。)ので、必要最低限のエフェクトや、メソッドだけで進められるのも魅力ですね。

このブログ用にビルドしてみる

カスタムビルドの方法だけメモしておきます。まずはjQueryをクローン。

% git clone git://github.com/jquery/jquery.git

ビルドモードをrun

% cd query && npm run build

あとはgruntでいらないものを削っていくだけ。とりあえずこのブログでいらないものを…

% grunt custom:-deprecated,-dimensions,-event/alias,-wrap

240KBから80KB程まで削れました。しかし相変わらずサイズ大きいなぁ…gzipにしても24KB。だからといって、今の時代占有するほどの容量でもないですし。ラッパー周り書き直したくないので…。たかがblog、楽したいもの decomoji

はい。あとはdistで指定したフォルダに書き出すだけ。

% grunt && grunt dist:./jquery/build/

これで終了。バージョン管理も出来るので、パッケージ化するのにも楽。いやはや…時代の流れに乗っている内、便利になっていくものです。