jQuery是采用grunt来管理其项目。

它在grunt中定义了单元测试、代码检查、压缩、自定义模块打包等等。

如果你不熟悉grunt可以参考官网教程grunt或者本人的另一博客grunt 简易教程。

jQuery源码及初始化环境

首先克隆一份jquery源码到本地

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

然后进入jquery目录并安装依赖的grunt插件

cd jquery && npm install

最后进行bower依赖下载

bower install

完成以上步骤就已经完成了jquery所有开发环境。这时候你可以进行测试、打包、开发等等。

分析grunt配置

jQuery使用了6个grunt插件，其余的是自定义任务实现。6个grunt插件分别是：

  • grunt-compare-size: 用来比较文件大小。
  • grunt-contrib-jshint: 用来检查javascript代码的格式。
  • grunt-contrib-uglify: 用来压缩javascript代码。
  • grunt-contrib-watch: grunt的自动检测文件改变任务插件。
  • grunt-git-authors: 用来列该项目的作者。
  • grunt-jsonlint: 用来检查javascript代码的格式。

自定义实现了requirejs、custom等等任务。

自定义排除打包模块，例如排除ajax模块。

grunt custom:-ajax

输出结果：

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

Running "build:all:*:-ajax" (build) task
Excluding ajax             (src/ajax.js)
Excluding ajax/script      (src/ajax/script.js)
Excluding ajax/jsonp       (src/ajax/jsonp.js)
Excluding ajax/xhr         (src/ajax/xhr.js)
File 'dist/jquery.js' created.

Running "uglify:all" (uglify) task
Source Map "dist/jquery.min.map" created.
File "dist/jquery.min.js" created.
Uncompressed size: 209152 bytes.
Compressed size: 16767 bytes gzipped (73066 bytes minified).

Running "dist" task



Done, without errors.

主要模块

  • ajax: 包括所有ajax功能。
  • ajax/xhr: 只 XMLHTTPRequest ajax功能。
  • ajax/script: 只 <script></script> ajax功能。
  • ajax/jsonp: 只 JSONP ajax功能。
  • css: .css()方法和非动画的.show()、.hide()和.toggle()等，包含css操作的方法。
  • deprecated: 主要是指定文档弃用的模块或功能，其并未删除。
  • dimensions: .width() 和 .height() 方法等，包含inner- 和 outer-变化。
  • effects: 动画，如.animate()、.slideUp() 和 .hide(“slow”)等。
  • event: 事件如.on() 和 .off()方法。
  • event-alias: 事件如.click() 或者 .mouseover()等。
  • offset: .offset()、 .position()、 .offsetParent()、 .scrollLeft() 和 .scrollTop()方法
  • wrap: .wrap()、 .wrapAll()、 .wrapInner() 和 .unwrap() 方法。
  • exports/amd: AMD定义.
  • core/ready: jQuery ready函数。
  • deferred:回调等相关。
  • sizzle: 另外个框架，主要是选择元素。

grunt带来的好处

jQuery可以帮助我们操作DOM容易，但与200 KB的大小，它可能会影响网站性能。因此，排除一些不必要的jQuery模块，jQuery肯定会运行更快，更高效。借助grunt可以很方便的管理和自定义打包。开发中使用也是非常方便的，可以依赖grunt的watch插件实时监测javascript代码格式，方便统一团队开发。

参考