一、安裝node
很簡單,這裏有入門參考。
二、安裝grunt
也很簡單,這裏有入門參考。
三、去github下載jQuery源碼
使用命令: git clone git://github.com/jquery/jquery.git
下載後的目錄
四、安裝依賴包
確保第二步裏grunt-cli已經安裝(推薦全局安裝,使用參數-g)。
這裏使用命令npm install即可,下載的東西比較多,大概需要1分鐘左右。下載完成後根目錄jquery中多了一個node_modules,如下
可以看到安裝了一堆lib,uglify、gzip.js、requirejs等。至此,所有安裝都已完畢。
五、編譯源碼到dest目錄
非常簡單,cd到jquery目錄,敲grunt,如圖
此時jquery目錄裏多了一個dest目錄
dest目錄有三個文件,未壓縮的jquery.js,壓縮的jquery.min.js和souremap(jquery.min.map需瀏覽器支持),這就是最終生產環境用到jquery版本。和你在官網下載的沒有任何區別。
注意:
默認編譯的是的2.x版本,2.x不支持IE6,7,8,如果想編譯1.x的版本,使用git命令 git checkout 命令,如下將切換的 1.10.0
git checkout 1.10.0
所有的tag可通過命令 git tag 查看
六、定製你自己的jQuery
上面編譯的是完整版的jQuery,如果想定製自己的jQuery,比如你不需要動畫模塊,或者不需要ajax模塊等。
查看jquery目錄下的src目錄,可以看到jQuery自身是分模塊開發的,各個模塊在獨立的目錄或文件裏,如下圖
除了 核心模塊(core)和 選擇器(selector),其它模塊都可以定製(包含或排除)。
比如你的項目中沒有用到ajax模塊,那麼通過以下命令編譯的jquery.js將不包含.ajax,.ajax,.get, $.getJSON等。
cd到jquery目錄,輸入 grunt custom:-ajax
此時查看dest目錄下的jquery.js會發現代碼只有7千多行,少了許多。這個版本的jquery版本號也很特殊,如下
不想包含多個模塊,以逗號分隔即可,如
不包含ajax和動畫:grunt custom:-ajax,-effects
不包含css、位置、包裹:grunt custom:-css,-offset,-wrap
七、修改jQuery的AMD模塊名
我們知道jQuery可以做爲AMD的一個模塊存在,它默認的模塊名是 "jquery"。
如果不想使用該名稱,通過命令 grunt custom --amd="my-jquery" 即可完成修改
這時jquery的模塊名稱就變爲 "my-jquery" 了,jquery.js源碼中體現如下
1 2 3 4 5 | if ( typeof define === "function" && define.amd ) { define( "my-jquery" , [], function () { return jQuery; }); } |
此時當你的模塊require時,需要改爲 require('my-jquery'),通過define傳遞依賴時也需要改下