Grunt是基於Node.js的項目構建工具。它能夠自動運行你所設定的任務,如編譯less,sass,壓縮js,合拼文件等等。css
(一)安裝nodejs環境,Grunt 0.4.x要求Node.js的版本>=0.8.0,若是你已安裝了nodejs,命令行中運行
node -v
查看你的Node.js版本,若是版本號不夠,從新安裝覆蓋舊版本。
node
(二)若是你的公司是用代理上網,先命令行 npm set proxy=http://ip地址 ,而後命令行 npm install -g grunt-cli 將grunt植入到你的系統裏面,這樣就容許你從任意目錄來運行它(定位到任意目錄運行grunt
命令),安裝grunt-cli
並不等於安裝了grunt任務運行器!Grunt CLI的工做很簡單:在Gruntfile
所在目錄調用運行已經安裝好的相應版本的Grunt。這就意味着能夠在同一臺機器上同時安裝多個版本的Gruntgit
(三)gruntjs的運行是依靠着package.json
和Gruntfile.js這兩個
文件配置,在你的項目根目錄新建此 2 個文件,格式以下:github
(1)package.json 在此文件寫入你項目所依賴的Grunt版本和Grunt插件,例子:npm
{ "name": "pcauto", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-less": "~0.11.4",
"grunt-contrib-watch": "~0.6.0" } }
name :項目的名稱,version:項目的版本號(這些都是隨意的),devDependencies:設置grunt版本號與各插件 (名城:版本號,能夠在官網查看相關的名稱與版本號),更多插件查看json
(2)在此項目根目錄 shift + 右鍵 -> 在此處打開命令行,npm installsass
在根目錄自動生成一個 node_modules的文件夾,裏面就是你須要的grunt插件,到這步 grunt版本與插件都安裝好了,下一步就是配置Gruntfile.jsless
(3)配置工做流Gruntfile.jsgrunt
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), less: { dev: { files:{ 'css/index.css':'less/index.less', 'css/page.css':'less/page.less' } } }, watch:{ less:{ files:['less/*.less'], tasks:['less'] } } }); // 加載包含 "uglify" 任務的插件。 grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); // 默認被執行的任務列表。 grunt.registerTask('default', ['less','watch']); };
【1】pkg: grunt.file.readJSON('package.json') 就是把在剛配置好的json數據導入到Grunt配置中工具
【2】插件調用配置
less: { dev: { files:{ 'css/index.css':'less/index.less', 'css/page.css':'less/page.less' } } }
手動匹配:調用配置,如圖less 中,指定了名爲dev(自定義,必需)的任務,而後執行多文件處理,格式爲 files:{'xxxx輸出的css文件路徑與文件名':'xxx你所編寫的less文件','xxxx':'xxxxx'}
自動所有文件匹配模式
less: { dev: { files: [{ expand: true, cwd: 'less/', src: ['*.less'], dest: 'css/', ext: '.css' }] } }
爲了不每次編譯都要運行一個命令行,這裏有個很好的插件 watch,它能實時監控(如例子中在watch任務中監控less文件夾下的全部less文件,一旦代碼有發生改變,就自動執行less編譯任務,就不須要每次運行 grunt命令行。注:開始只須要運行一次 grunt命令行,而後窗口不要關閉,保持打開的狀態,以下圖。)
【3】加載任務插件 grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch');
【4】定義被執行的任務列表 grunt.registerTask('default', ['less','watch']); (默認任務,若是你的名稱是 grunt.registerTask('yong', ['less','watch']),那麼在下一步中運行命令行就是grunt yong)
到這裏,已經所有都配置好,下一步就是運行
(四)在此項目根目錄 shift + 右鍵 -> 在此處打開命令行,grunt
在以前的時代,編譯less,壓縮文件,與合拼文件,都須要藉助不一樣的工具逐個逐個任務執行完成,效率很低,現在有了 Grunt,一切都自動化。
(五)注意事項:
(1)使用uglify壓縮的js文件是utf-8編碼的,若是你的頁面是gb2312,若是你的js代碼有輸出中文如:document.getElementById('demo').innerHTML = '中文';那麼頁面就出現亂碼
解決:插件提供參數:ASCIIOnly:true,將中文文字轉爲ASCII碼,而後js文件裏面的代碼輸出就是 document.getElementById("demo").innerHTML="\u4e2d\u6587";
uglify:{ options: { ASCIIOnly:true } }
(2)使用cssmin,默認狀況下,會把css_hack,如ie6的屬性去掉;
解決:
cssmin: { options : { compatibility : 'ie8', //設置兼容模式 noAdvanced : true //取消高級特性 } }
(六)經常使用插件
grunt-spritesmith //圖片合拼與生成代碼片斷
grunt-contrib-watch //實時監聽文件,執行任務
grunt-contrib-cssmin //樣式合拼與壓縮
grunt-contrib-uglify //腳步合拼與壓縮
貼上一個配置例子,僅供參考:
package.json
{ "name": "pcauto", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-less": "~1.0.0", "grunt-contrib-uglify": "~0.7.0", "grunt-contrib-imagemin":"~0.9.0", "grunt-contrib-cssmin": "~0.7.0", "grunt-contrib-watch": "~0.6.0" } }
Gruntfile.js
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //less編譯爲css less: { dev: { files: [{ expand: true, cwd: 'src/less/', src: ['*.less'], dest: 'src/css/', ext: '.css' }] } }, //css文件壓縮 cssmin:{ dev:{ files: [{ expand: true, cwd: 'src/css/', src: ['*.css', '!*.min.css'], dest: 'css/', ext: '.min.css' }] } }, //壓縮js文件 uglify:{ options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm") %> */\n' }, dev:{ files:[{ expand:true, cwd:'src/js/', src:'*.js', dest:'js/', ext: '.min.js' }] } }, //圖片壓縮 imagemin:{ dev:{ files:[{ expand: true, cwd: 'src/image/', src: ['*.{png,jpg}'], dest: 'image/' }] } }, //實時監控任務 watch:{ less:{ files:['src/less/*.less'], tasks:['less'] }, uglify:{ files:['src/js/*.js'], tasks:['uglify'] }, cssmin:{ files:['src/css/*.css'], tasks:['cssmin'] }, imagemin:{ files:['src/image/*.{png,jpg}'], tasks:['imagemin'] } } }); // 加載包含 "uglify" 任務的插件。 grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-imagemin'); // 默認被執行的任務列表。 grunt.registerTask('default', ['less','cssmin','uglify','imagemin','watch']); };