使用grunt創建項目 · 如何編寫jQuery插件

## 1.6\. 使用grunt創建項目 [grunt](http://gruntjs.com/getting-started)是基于任務的構建工具，和make，rake，ant，cake，maven，gradle等是一樣的 ### 1.6.1\. 前置條件前置條件需要有nodejs和npm，請確保已安裝成功： ``` npm install -g grunt npm install -g grunt-init git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery grunt-init jquery ``` 如果是萬惡的window系統，請修改: ``` git clone https://github.com/gruntjs/grunt-init-jquery.git %USERPROFILE%/.grunt-init/jquery ``` 另外如果是linux或者mac，使用-g安裝的時候可能需要sudo權限，具體自己看日志 ### 1.6.2\. 創建項目 ``` ? jquery_plugin git:(master) ? mkdir plugin_grunt ? jquery_plugin git:(master) ? cd plugin_grunt ? plugin_grunt git:(master) ? grunt-init jquery Running "init:jquery" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "jquery" template notes: Project name should not contain "jquery" or "js" and should be a unique ID not already in use at plugins.jquery.com. Project title should be a human-readable title, and doesn't need to contain the word "jQuery", although it may. For example, a plugin titled "Awesome Plugin" might have the name "awesome-plugin". For more information, please see the following documentation: Naming Your Plugin http://plugins.jquery.com/docs/names/ Publishing Your Plugin http://plugins.jquery.com/docs/publish/ Package Manifest http://plugins.jquery.com/docs/package-manifest/ Please answer the following: [?] Project name (plugin_grunt) i5ting-mobile [?] Project title (I5ting Mobile) [?] Description (The best jQuery plugin ever.) this is a test jq plugin [?] Version (0.1.0) [?] Project git repository (git://github.com/i5ting/How-to-write-jQuery-plugin.git) [?] Project homepage (https://github.com/i5ting/How-to-write-jQuery-plugin) [?] Project issues tracker (https://github.com/i5ting/How-to-write-jQuery-plugin/issues) [?] Licenses (MIT) [?] Author name (shiren1118) i5ting [?] Author email (shiren1118@126.com) i5ting@126.com [?] Author url (none) [?] Required jQuery version (*) [?] Do you need to make any changes to the above before continuing? (y/N) Writing .gitignore...OK Writing .jshintrc...OK Writing CONTRIBUTING.md...OK Writing Gruntfile.js...OK Writing README.md...OK Writing libs/jquery-loader.js...OK Writing libs/jquery/jquery.js...OK Writing libs/qunit/qunit.css...OK Writing libs/qunit/qunit.js...OK Writing src/.jshintrc...OK Writing src/i5ting-mobile.js...OK Writing test/.jshintrc...OK Writing test/i5ting-mobile.html...OK Writing test/i5ting-mobile_test.js...OK Writing LICENSE-MIT...OK Writing package.json...OK Writing i5ting-mobile.jquery.json...OK Initialized from template "jquery". You should now install project dependencies with npm install. After that, you may execute project tasks with grunt. For more information about installing and configuring Grunt, please see the Getting Started guide: http://gruntjs.com/getting-started Done, without errors. ? plugin_grunt git:(master) ? ``` ### 1.6.3\. 安裝依賴切換到plugin_grunt根目錄，通過下面命令安裝grunt依賴的包 ``` ? plugin_grunt git:(master) npm install ``` qunit 依賴phantomjs，需要翻墻，自備梯子或者 [http://i5ting.github.io/How-to-write-jQuery-plugin/node_modules.zip](http://i5ting.github.io/How-to-write-jQuery-plugin/node_modules.zip) ### 1.6.4\. 測試 grunt的task是在Gruntfile.js里定義的，所以看最后的2句 ``` // Default task. grunt.registerTask('default', ['jshint', 'qunit', 'clean', 'concat', 'uglify']); ``` 通過上面可以知道grunt默認的tast包括'jshint', 'qunit', 'clean', 'concat', 'uglify'，也就是說執行grunt命令會依次執行這些task。任務說明 * jshint 語法校驗 * qunit 單元測試 * clean 清理歷史 * concat 合并多個src到一個文件中 * uglify 將concat的文件進行混淆當然你也可以分別運行，比如，運行單元測試： ``` grunt qunit ``` 比如，運行混淆代碼 ``` grunt uglify ``` 沒有error，通過即可。