一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

GruntでjQueryをカスタムビルドしてみた

今回はjQueryのカスタムビルドに挑戦してみました。
これができれば余計な機能を省いた軽いjQueryを使えるようになるのでパフォーマンスの向上も期待できるはず!!


ひとまず参考にしたのは

https://github.com/jquery/jquery

のREADMEです。
ここに一連の流れを書いてくれていたので、真似してやってみました。


まず、

mkdir jquery_build
cd jquery_build

として、jQueryのカスタムビルドを試すようのディレクトリを作成して、そこに移動します。


次に

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

として、必要なものをすべてcloneします。


次はgrunt-cliとbowerを入れとけって書いてたんですが、grunt-cliはすでにインストール済みだったので、bowerのみ、

npm install -g bower

として入れておきました。
grunt-cliを入れていない方はそちらも合わせて入れておいてください!!


ちなみにbowerってなんぞやって感じなんですが、、

BowerはWeb開発向けのパッケージマネージャーです。画像・CSSJavaScriptといったリソースを簡単にインストールする事ができ、依存関係を管理してくれます。


http://blog.mach3.jp/2013/01/bower.html
を参考にさせて頂きました。


そして、先ほどcloneしたjqueryディレクトリで、

npm install

としておけば必要なものを全部インストールしてくれます。これで準備完了!

あとは

grunt

って打てばjQueryのビルドが完了するはず!


ん?
ここで何かエラーがでました。

Running "jsonlint:pkg" (jsonlint) task
File "package.json" is valid JSON.

Running "jsonlint:bower" (jsonlint) task
File "bower.json" is valid JSON.

Running "build:all:*" (build) task
Warning: Error: ENOENT, no such file or directory '/Users/ここはユーザー名/Desktop/jquery-build/jquery/src/../bower_components/sizzle/dist/sizzle.js'
In module tree:
    jquery
      selector
        selector-sizzle

    at Object.fs.openSync (fs.js:427:18)
 Use --force to continue.

Aborted due to warnings.


ふむ。デバックモード発動。

grunt --debug
Running "jsonlint:pkg" (jsonlint) task
[D] Task source: /Users/hideaki/Desktop/jquery-build/jquery/node_modules/grunt-jsonlint/tasks/jsonlint.js
[D] Validating "package.json"...
File "package.json" is valid JSON.

Running "jsonlint:bower" (jsonlint) task
[D] Task source: /Users/hideaki/Desktop/jquery-build/jquery/node_modules/grunt-jsonlint/tasks/jsonlint.js
[D] Validating "bower.json"...
File "bower.json" is valid JSON.

Running "build:all:*" (build) task
[D] Task source: build/tasks/build.js
Warning: Error: ENOENT, no such file or directory '/Users/hideaki/Desktop/jquery-build/jquery/src/../bower_components/sizzle/dist/sizzle.js'
In module tree:
    jquery
      selector
        selector-sizzle

    at Object.fs.openSync (fs.js:427:18)
 Use --force to continue.

Aborted due to warnings.

build.jsとかみてみたんですが、いまいちようわからん…


ここでREADMEをもっかい読んでみると、どうやら続きがありますね。


To create a custom build of the latest stable version, first check out the version:

git pull; git checkout $(git describe --abbrev=0 --tags)


ふむ。
てなわけで

git pull
git checkout $(git describe --abbrev=0 --tags)

を実行してみました。

ちなみにgit describeなんてコマンドはじめてみたのですが、
「特定のコミットから到達可能な直近のタグを表示する」ためのコマンドだそうです。

git describe --tags

2.0.3

って出ますね。

http://kozy.heteml.jp/pukiwiki/index.php?Git%20%A4%A2%A4%F3%A4%DE%A4%EA%BB%C8%A4%EF%A4%CA%A4%A4%A5%B3%A5%DE%A5%F3%A5%C9%A4%CE%A5%E1%A5%E2

を参考にさせて頂きました。


そして再び

npm install

して

grunt

Running "update_submodules" task

Running "selector" task
File 'src/selector-sizzle.js' created.

Running "build:all:*" (build) task
File 'dist/jquery.js' created.

Running "jshint:dist" (jshint) task
>> 1 file lint free.

Running "jshint:grunt" (jshint) task
>> 1 file lint free.

Running "jshint:tests" (jshint) task
>> 23 files lint free.

Running "pre-uglify:all" (pre-uglify) task

Running "uglify:all" (uglify) task
Source Map "dist/jquery.min.map" created.
File "dist/jquery.min.js" created.
Original: 241772 bytes.
Minified: 83641 bytes.

Running "post-uglify:all" (post-uglify) task

Running "dist:*" (dist) task

Running "compare_size:files" (compare_size) task
>> not a branch tip: f576d00d9fe48b5e6f9c1c8d3287f2b893937dbb
   raw     gz Sizes
242142  71789 dist/jquery.js
 83606  29267 dist/jquery.min.js

Done, without errors.


おお!エラーなしにビルドがでけました。
これでやりたかったjQueryのカスタムビルドもできるかも!!


カスタムビルドは例えばjQUeryCSSメソッドはいらねえやって時は

grunt custom:-css

Running "custom:-css" (custom) task
Creating custom build...

Running "build:all:*:-css" (build) task
Excluding css              (src/css.js)
Excluding effects          (src/effects.js)
Excluding offset           (src/offset.js)
Excluding dimensions       (src/dimensions.js)
File 'dist/jquery.js' created.

Running "pre-uglify:all" (pre-uglify) task

Running "uglify:all" (uglify) task
Source Map "dist/jquery.min.map" created.
File "dist/jquery.min.js" created.
Original: 199893 bytes.
Minified: 68727 bytes.

Running "dist" task

Done, without errors.

ってやるとそのメソッドを除外したjQueryを吐き出してくれます。

CSSメソッド有りと無しで比較してみると、

f:id:d_animal141:20130824151722p:plain


たしかに軽くなってますね。

そしてサンプルソースは割愛しますが、実際に吐き出されたCSSメソッド無しのjQueryを読み込んでcssメソッドを使おうとすると

$(selector).css("background", "red");

Uncaught TypeError: Object [object Object] has no method 'css' 

ちゃんと予想通りエラーが出てくれました。

すごい!!


ちなみに削りたい機能が複数あるときは

grunt custom:-ajax, -css

みたいに区切って指定してやればOKぽいです。


jQueryってめっちゃ便利ですけど、「その全機能を使ってるか?」って聞かれると実際のところ2、3割ぐらいしか使ってないかもしれないですね。

jQueryはその進化とともにかなり肥大になってきているので、今回のようなカスタムビルドを使う事で、より無駄のないハイパフォーマンスな実装ができるのではないでしょうか。

今後、お仕事でもどんどん使っていきたいですね。

とりあえずbowerがよくわかってないから調べないと。。

小さな事からコツコツと。