Grunt是基于Node.js的項目構建工具。它可以自動運行你所設定的任務，如編譯less，sass，壓縮js，合拼文件等等。

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

?

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

?

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

　　（1）package.json ?在此文件寫入你項目所依賴的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 ：項目的名稱，version：項目的版本號（這些都是隨意的），devDependencies：設置grunt版本號與各插件 （名城：版本號，可以在官網查看相關的名稱與版本號），更多插件查看

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

　　

　　在根目錄自動生成一個 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" 任務的插件。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']);};

?

轉載于:https://www.cnblogs.com/focuslgy/p/4248007.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。