Grunt是前端的瑞士軍刀。目前看來榨乎，我很期待使用它來完成對LESS實時編譯，jshint對JS文件的檢測瘫筐，以及js和css文件的合并蜜暑，壓縮。本文使用系統(tǒng)為windows 7 x64策肝。
安裝
說實話肛捍，最好的教程還是官方的。目前我使用的版本是v0.4.1之众。安裝grunt需要先安裝node.js∽竞粒現(xiàn)在node的安裝也很方便，下載下來直接安裝完成之后棺禾，在cmd下測試node --version和npm --version是否正確顯示即可缀蹄。
之后需要借助npm來安裝grunt-cli，注意膘婶，不是安裝grunt缺前。想要在cmd中使用grunt命令，需要npm install -g grunt-cli竣付。完成后測試grunt --version看是否正確顯示grunt-cli版本诡延。
這樣，就完成了grunt的安裝古胆。
在項目中使用
首先創(chuàng)建一個項目目錄肆良，由于grunt是node環(huán)境下運行筛璧，需要使用npm進行管理。所以項目必須要有一個package.json文件惹恃，里面最重要的是寫明白devDependencies依賴關系夭谤。這里有一個例子（用于編譯less）可以使用：
{"name":"ProjectName","version":"0.1.0","devDependencies": {"grunt":"*","grunt-contrib-less":"*","grunt-contrib-watch":"*"}}
有了package.json文件之后，我們就可以使用npm install來建立項目了巫糙。但是此時朗儒，還不能使用grunt命令，因為還差一個Gruntfile.js或者Gruntfile.coffee的文件参淹。這個文件作用是grunt如何工作醉锄。繼續(xù)那個例子（編譯less）的Gruntfile.js如下：
module.exports =function(grunt){grunt.initConfig({? ? less: { ? compile: { files: {'css/test.css':'css/test.less'} }, ? ?yuicompress: { ? files: {'css/test-min.css':'css/test.css'},? ? ? ? ? ? options: { ? ?yuicompress:true} ? }? ? },? ? watch: {? ? ? ? scripts: {? ? ? ? ? ? files: ['css/*.less'],? ? ? ? ? ? tasks: ['less']? ? ? ? }? ? }});grunt.loadNpmTasks('grunt-contrib-less');grunt.loadNpmTasks('grunt-contrib-watch');grunt.registerTask('default', ['less','watch']);};
這樣，在項目路徑下浙值，就可以執(zhí)行grunt來完成對css路徑下less文件的實時編譯了恳不。
小技巧
我覺得入門的時候，最煩人的就是package.json和Gruntfile.js的創(chuàng)建开呐。所以grunt有一個grunt-init的工具烟勋，項目地址。通過npm install -g grunt-init安裝之后筐付，還需要創(chuàng)建~/.grunt-init目錄卵惦。在此目錄中通過git clone來加載模版。模版加載完成之后瓦戚，就可以通過grunt-init TEMPLATE來創(chuàng)建了沮尿。
另一個小技巧，在項目目錄下较解，先通過npm init創(chuàng)建默認的package.json文件蛹找，然后npm install。以后需要用到哪個模塊的時候（比如grunt）哨坪，使用npm install --save-dev會自動把依賴關系寫入到package.json中。--save-dev會自動維護package.json文件乍楚。
