Grunt是基于Node.js的項(xiàng)目構(gòu)建工具。它可以自動(dòng)運(yùn)行你所設(shè)定的任務(wù)，如編譯less，sass，壓縮js，合拼文件等等。

（一）安裝nodejs環(huán)境，Grunt 0.4.x要求Node.js的版本>=0.8.0，如果你已安裝了nodejs，命令行中運(yùn)行node -v查看你的Node.js版本，如果版本號(hào)不夠，重新安裝覆蓋舊版本。

?

（二）如果你的公司是用代理上網(wǎng)，先命令行 npm set proxy=http://ip地址?，然后命令行?npm install -g grunt-cli 將grunt植入到你的系統(tǒng)里面，這樣就允許你從任意目錄來運(yùn)行它(定位到任意目錄運(yùn)行g(shù)runt命令)，安裝grunt-cli并不等于安裝了grunt任務(wù)運(yùn)行器！Grunt CLI的工作很簡(jiǎn)單：在Gruntfile所在目錄調(diào)用運(yùn)行已經(jīng)安裝好的相應(yīng)版本的Grunt。這就意味著可以在同一臺(tái)機(jī)器上同時(shí)安裝多個(gè)版本的Grunt

?

（三）gruntjs的運(yùn)行是依靠著package.json和Gruntfile.js這兩個(gè)文件配置，在你的項(xiàng)目根目錄新建此 2 個(gè)文件，格式如下:

　　（1）package.json ?在此文件寫入你項(xiàng)目所依賴的Grunt版本和Grunt插件，例子：

{"name": "pcauto","version": "0.1.0","devDependencies": {"grunt": "~0.4.5","grunt-contrib-less": "~0.11.4",
　　"grunt-contrib-watch": "~0.6.0"} }

　　name ：項(xiàng)目的名稱，version：項(xiàng)目的版本號(hào)（這些都是隨意的），devDependencies：設(shè)置grunt版本號(hào)與各插件 （名城：版本號(hào)，可以在官網(wǎng)查看相關(guān)的名稱與版本號(hào)），更多插件查看

　　（2）在此項(xiàng)目根目錄 shift + 右鍵 -> 在此處打開命令行，npm install

　　

　　在根目錄自動(dòng)生成一個(gè) node_modules的文件夾，里面就是你需要的grunt插件，到這步 grunt版本與插件都安裝好了，下一步就是配置Gruntfile.js

　　（3）配置工作流Gruntfile.js

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" 任務(wù)的插件。grunt.loadNpmTasks('grunt-contrib-less');grunt.loadNpmTasks('grunt-contrib-watch');// 默認(rèn)被執(zhí)行的任務(wù)列表。grunt.registerTask('default', ['less','watch']);};

　　【1】pkg: grunt.file.readJSON('package.json') ?就是把在剛配置好的json數(shù)據(jù)導(dǎo)入到Grunt配置中

　　【2】插件調(diào)用配置

less: { dev: {files:{'css/index.css':'less/index.less','css/page.css':'less/page.less'}} }

　　手動(dòng)匹配：調(diào)用配置，如圖less 中，指定了名為dev（自定義，必需）的任務(wù)，然后執(zhí)行多文件處理，格式為 files:{'xxxx輸出的css文件路徑與文件名':'xxx你所編寫的less文件','xxxx':'xxxxx'}

　　自動(dòng)全部文件匹配模式

less: {dev: {files: [{expand: true,cwd: 'less/',src: ['*.less'],dest: 'css/',ext: '.css'}]} }　

更詳細(xì)的配置

　　　　　為了避免每次編譯都要運(yùn)行一個(gè)命令行，這里有個(gè)很好的插件 watch，它能實(shí)時(shí)監(jiān)控（如例子中在watch任務(wù)中監(jiān)控less文件夾下的所有l(wèi)ess文件，一旦代碼有發(fā)生改變，就自動(dòng)執(zhí)行l(wèi)ess編譯任務(wù)，就不需要每次運(yùn)行 grunt命令行。注：開始只需要運(yùn)行一次 grunt命令行，然后窗口不要關(guān)閉，保持打開的狀態(tài)，如下圖。）

　　【3】加載任務(wù)插件 ??grunt.loadNpmTasks('grunt-contrib-less'); ?grunt.loadNpmTasks('grunt-contrib-watch');

　　【4】定義被執(zhí)行的任務(wù)列表 ??grunt.registerTask('default', ['less','watch']); ? (默認(rèn)任務(wù)，如果你的名稱是 grunt.registerTask('yong', ['less','watch'])，那么在下一步中運(yùn)行命令行就是grunt yong)?

　　到這里，已經(jīng)全部都配置好，下一步就是運(yùn)行

（四）在此項(xiàng)目根目錄 shift + 右鍵 -> 在此處打開命令行，grunt

　　

　　在之前的時(shí)代，編譯less，壓縮文件，與合拼文件，都需要借助不同的工具逐個(gè)逐個(gè)任務(wù)執(zhí)行完成，效率很低，如今有了 Grunt，一切都自動(dòng)化。

?

（五）注意事項(xiàng)：

　　（1）使用uglify壓縮的js文件是utf-8編碼的，如果你的頁面是gb2312，如果你的js代碼有輸出中文如：document.getElementById('demo').innerHTML = '中文';那么頁面就出現(xiàn)亂碼

　　　　　解決：插件提供參數(shù)：ASCIIOnly:true，將中文文字轉(zhuǎn)為ASCII碼,然后js文件里面的代碼輸出就是 ?document.getElementById("demo").innerHTML="\u4e2d\u6587";

uglify:{options: {ASCIIOnly:true} }

　　（2）使用cssmin，默認(rèn)情況下，會(huì)把css_hack,如ie6的屬性去掉；

? ? ? ? ? ? ?解決：

cssmin: { options : { compatibility : 'ie8', //設(shè)置兼容模式 noAdvanced : true //取消高級(jí)特性 } }

?

（六）常用插件?

grunt-spritesmith //圖片合拼與生成代碼片段 grunt-contrib-watch //實(shí)時(shí)監(jiān)聽文件，執(zhí)行任務(wù) grunt-contrib-cssmin //樣式合拼與壓縮 grunt-contrib-uglify //腳步合拼與壓縮

?

貼上一個(gè)配置例子，僅供參考：

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/' }]}},//實(shí)時(shí)監(jiān)控任務(wù) 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" 任務(wù)的插件。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');// 默認(rèn)被執(zhí)行的任務(wù)列表。grunt.registerTask('default', ['less','cssmin','uglify','imagemin','watch']);};

?

轉(zhuǎn)載于:https://www.cnblogs.com/focuslgy/p/4248007.html

總結(jié)

以上是生活随笔為你收集整理的gruntjs开发实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。