Grunt構建項目

Grunt

使用Grunt構建kissy項目

什麼是Grunt？

創建在Node.js之上，Grunt是一個基於命令行的工具，用於加快工做流程，減小用於生前以前所作的準備。它能夠結速工做與自動編譯一同進行。基本上，你可使用Grunt的大部分任務來幫你處理你認爲乏味的，一般須要手工配置和運行的工做。

Grunt能幹些什麼？

按任務目標大體可分爲四類：

• 文件操做型：好比合並、壓縮js和css文件等（包括）
• 預編譯型：好比編譯less、sass、coffeescript等
• 類庫項目構建型：好比 angular、ember、backbone等（這種推薦使用yeoman）
• 工程質量保障型：好比jshint、jasmine、mocha等

除此以外還有像 watch （監聽文件改變，自動觸發構建）等功能。

安裝Grunt

grunt依賴NodeJs和npm，請確保你的計算機已經安裝該環境。 特別留意下grunt是有二個版本：服務器端版本（grunt）和客戶端版本（grunt-cli），咱們須要安裝的是客戶端版本。

npm install -g grunt-cli

若是你不慎安裝了服務器端版，請現予以卸載：

npm uninstall -g grunt

爲了確保Grunt已經正確安裝，你能夠運行下面的命令：

grunt –version

建立package.json文件

JSON文件使咱們能跟蹤和安裝咱們全部開發所依賴的信息。而後，對項目工做的人會擁有當前開發依賴性，最終有助於保持同步的開發環境。 在項目的根目錄下建立package.json文件。package.json用於配置你須要拉取的grunt插件信息:

{"name":"grunt",// 項目名稱"version":"0.1.0",// 項目版本"author":"dawncc",// 項目依賴"devDependencies":{"grunt-kmc":"*",//kmc插件"grunt-contrib-uglify":"~0.2.0"}}

其中devDependencies字段，定義你要拉取的依賴模塊，上面的代碼，拉取grunt-contrib-uglify插件（用於壓縮js），字段的值~0.2.0，指明須要模塊的版本號，「~」是至少的意思。同時拉取grunt-kmc的全部插件。

在工程根目錄啓動命令行工具，運行：

npm install

經過package.json依賴關係將其中定義的插件安裝在node_modules目錄中。

這個時候，你的項目的根目錄下會新增長一個node_modules的目錄。

建立Gruntfile.js文件

Gruntfile.js本質上是一個函數，並且他的參數是grunt。它是用於配置或者定義Grunt任務和加載Grunt插件的。

在工程根目錄下放個Gruntfile.js，文件內容以下：

module.exports =function(grunt){// 構建任務配置 grunt.initConfig({//讀取package.json的內容，造成個json數據 pkg: grunt.file.readJSON('package.json'), uglify:{//文件頭部輸出信息 options:{ banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},//具體任務配置<!-- build:{//源文件 src:'src/index.js',//目標文件 dest:'build/index-min.js'}--> build:{ files:{'build/index-min.js':['src/index.js']}},}});// 加載指定插件任務 grunt.loadNpmTasks('grunt-contrib-uglify');// 默認執行的任務 不定義默認任務會出現 >Task "default" not found. Use --force to continue.  grunt.registerTask('default',['uglify']);};

在根目錄下執行grunt命令： 「Done,without error」，說明已經構建成功，且沒有錯誤，你能夠看到grunt是很是迅速的！ 來看下目錄，你就會看到build下出現了hello-grunt-min.js，文件內容以下：

/*! demo 2013-07-13 */!function(a){var b="<p>hello grunt!</p>";a("body").append(b)}(jQuery);

已經使用uglify壓縮成功！