Help us understand the problem. What is going on with this article?

Grunt管理されたjQueryでコードハック 〜 JSおくのほそ道 #010

More than 5 years have passed since last update.

こんにちはほそ道です。
今回は「jQueryコードハックするならこの仕組み知っとくといいかも」というネタを紹介します。

目次はこちら

jQueryの取得先

jQueryコードを入手する場合さまざまなルートがあります
- 公式サイトからダウンロード
- CDNにホストされたjQueryをダウンロード
- githubからclone

今回は3番目のgithub上のjQueryを取り上げます。
こちらはjQueryそのものの開発プロジェクトですね。
Gruntが採用されていてjQueryカスタムビルドを行ったり、
テストを実行する事も出来ます。(コミッターになるなら必須ですね)

Gruntわかんねーという方は以前まとめておりますのでご一読くださいませ。

github上のjQuery取得とシンプルなビルド

ソースコードの取得とjQueryビルドは下記のように行います。

2系のビルド

bash
git clone git://github.com/jquery/jquery.git
cd jquery
npm run build

1系のビルド

bash
git clone https://github.com/jquery/jquery.git -b 1.9-stable
cd jquery
npm install && grunt

現在は2系がmasterブランチで、1系は1.9-stableというブランチとなっているようです。
cloneしたディレクトリにはsrcディレクトリが存在し、
その中にビルドで組み上げられるモジュール群が格納されています。
npmコマンドでdistディレクトリが生成され、その中に結果ファイルとして
dist/jquery.jsや、ミニファイされたdist/jquery.min.jsが出力されます。

カスタムビルド

除外ビルド

先ほどのビルド方法で組み上げるとデフォルトで設定されたモジュール群が
すべてdistディレクトリのファイルに含まれる事になります。
ちなみに2系のdist/jquery.jsは9191行ありました。でかいな。。

ここでひとつREADMEにかいてあった カスタムビルド を試してみます。
下記コマンドの実行でビルド結果からajax系のモジュールを除外します。

bash
grunt custom:-ajax

これによってajax系のモジュールが除外され、
dist/jquery.jsは8010行までコード量が減りました。
ajaxの機能を全く使用しない場合は可読性の向上とファイルサイズの縮小が見込めます。

bash
grunt custom:-ajax,-css

また、上記のように複数のモジュールを除外する事も出来ます。

もうひとつのメリットとして除外を行うと、
実際に除外されたファイルの一覧がコンソールに出力されます。
これによって、ファイル/機能のグルーピングもある程度把握できます。

カスタムビルドの裏側

カスタムビルドはcustomタスクにマイナス記号でモジュール名を与えると除外されるという仕組みですが、
裏側では何をやっているのでしょう?
Guntfile内にgrunt.loadTasks( "build/tasks" );という記述があります。
実際に`build/tasks/build.jsというファイルがあり、
buildタスクやcustomタスクが定義されていました。
下記はcustomタスクの内容です。

build/build.js
grunt.registerTask( "custom", function() {
  var args = this.args,
  modules = args.length ? args[ 0 ].replace( /,/g, ":" ) : "";

  grunt.log.writeln( "Creating custom build...\n" );
  grunt.task.run([ "build:*:*" + (modules ? ":" + modules : ""), "uglify", "dist" ]);
});

buildタスクに:*:*を加えて、さらにコマンド引数の,:にして:module1:module2を与えて実行していますね。
ということは。。

bash
# さっきの
grunt custom:-ajax,-css
# こういうのもできる
grunt build:*:*:-ajax:-css

上記の様にしてもコマンドラインから実行可能ということですね。
ちゃんとdist/jquery.jsに除外が反映されているようです。

ちなみに、ソースコード内のコメントから:*をひとつだけ置くとemptyなjsを生成し
マイナス記号をプラス記号に変えると除外から追加に変わるよという記述を発見。
下記のようなコマンドを打つと最小構成が作れるんじゃないか!?

bash
# ところがバッテン。。。
grunt build:*:+core:+selector

コマンドが成功してそれっぽいjquery.jsが出力されました、が、、
残念ながらjQueryオブジェクトが生成されず、defineメソッド無いよというエラーが出てしまいました。。
とりあえず諦めます。。

最小構成ビルド

というわけで真の最小構成ビルドは除外によって作成するようです。
ちなみに除外可能なモジュールはREADMEに記載されてます。
※ブラウザ向けの実行時はexports/globalを除外すると$/jQuery変数が使用できなくなるようですので含めておきます。

bash
# 最小構成ビルドです
grunt custom:-ajax,-css,-deprecated,-dimensions,-effects,-event,-event/alias,-offset,-wrap,-core/ready,-deferred,-exports/amd,-sizzle

ちなみにdist/jquery.jsの行数は3224行。
ほそ道的にはもっと小さくしたいですが、
これだけでも基本機能のコードハックは相当やりやすくなったはずです。

まとめ

github上のjqueryを使う事で以下のようなコードハック上の利点が考えられます。

  • カスタムビルドを行う事で組み上げられたjQueryがシンプルな構成になる。
  • src上の分割されたモジュールを追う事で要点がつかみやすくなる。

今回は以上です。
次回はjQueryの根幹部のひとつ、CSSセレクタの仕組みを調べていこうと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away