Grunt 依賴 Node.js 所以在安裝之前確保你安裝了 Node.js。然后開(kāi)始安裝 Grunt
實(shí)際上攀唯，安裝的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt噪窘，這樣你就可以使用 grunt 命令來(lái)執(zhí)行某個(gè)項(xiàng)目中的 Gruntfile.js 中定義的 task 。但是要注意效扫，Grunt-cli 只是一個(gè)命令行工具倔监，用來(lái)執(zhí)行，而不是 Grunt 這個(gè)工具本身

項(xiàng)目的github地址：grunt_test

• 1.安裝node

node.js安裝教程

• 2.grunt命令行（CLI） 安裝在全局環(huán)境下菌仁，所以命令是這么寫(xiě)滴浩习！

npm install -g grunt-cli

• 3.新建一個(gè)項(xiàng)目，名字叫g(shù)runt_test：注意济丘，千萬(wàn)不要叫g(shù)runt谱秽，后面運(yùn)行g(shù)runt命令的時(shí)候會(huì)出錯(cuò)

下面是我的項(xiàng)目目錄

QQ截圖20161222155458.png

• 4.生成package.json，也可以手動(dòng)生成這樣一個(gè)文件

npm init

生成之后在里面填入以下內(nèi)容

package.json.png

• 5.安裝grunt

npm install grunt --save-dev 注意查看package.json文件

grunt安裝成功.png

偶闪盔？自動(dòng)把grunt的版本號(hào)加上啦弯院。對(duì)啦，這就是--save-dev的作用

• 6.安裝grunt插件

js語(yǔ)法檢查:grunt-contrib-jshint
安裝命令：npm install grunt-contrib-jshint --save-dev 下同
css語(yǔ)法檢查：grunt-contrib-csslint
合并文件：grunt-contrib-concat
js壓縮文件：grunt-contrib-uglify
css壓縮文件：grunt-contrib-cssmin
image壓縮文件：grunt-contrib-imagemin
html壓縮文件：grunt-contrib-htmlmin
Sass\Scss 編譯：grunt-contrib-sass
安裝sass插件后泪掀，我運(yùn)行g(shù)runt听绳，發(fā)現(xiàn)報(bào)錯(cuò)，提示ruby沒(méi)有安裝异赫，所以如果需要使用到這個(gè)插件的椅挣，要確保自己的電腦上是否有裝ruby，沒(méi)有的話要進(jìn)行安裝
sudo yum install ruby # CentOS, Fedora, 或 RHEL 系統(tǒng)
sudo apt-get install ruby-full # Debian 或 Ubuntu 系統(tǒng)
brew install ruby #蘋果系統(tǒng)
Less 編譯：grunt-contrib-less
監(jiān)聽(tīng)文件變動(dòng)：grunt-contrib-watch

建立本地服務(wù)器：grunt-contrib-connect

上面這些插件都安裝好后塔拳，注意看package.json文件中的內(nèi)容

grunt插件安裝成功.png

• 7.配置Gruntfile.js

這里是對(duì)每個(gè)需要的插件進(jìn)行配置

grunt.initConfig.png

插件太多了鼠证，挑其中一個(gè)(uglify，用于js壓縮)進(jìn)行詳細(xì)說(shuō)明

grunt-contrib-uglify.png

grunt是任務(wù)機(jī)制靠抑，我在這里給定了combine量九、compress、fileCompress三個(gè)任務(wù)，執(zhí)行g(shù)runt時(shí)會(huì)按順序執(zhí)行三個(gè)任務(wù)

uglify:{    
    options:{        
        sourceMap: false,        
        stripBanners: true,        
        //壓縮后的文件注釋信息        
        banner :'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n',        
        footer:'\n/*!修改于<%= grunt.template.today("yyyy-mm-dd") %>  */'    
    },    
    combine: {        
        files: {           
             'build/static/js/compress-<%= pkg.name %>-<%= pkg.version %>.min.js': ['dev/static/js/*.common.js'],            
            'build/static/js/compress.common.min.js': ['dev/static/js/*/*.common.js']        
        }    
    },    
    compress:{        
        options:{            
            report:"min",
        },        
        files:[{                
                expand:true,                
                cwd:'dev/static/js',                
                src:['*.js','!*.min.js','!*.common.js'],                
                dest:'build/static/js',                
                ext:'.min.js'           
        }]    
    },    
    fileCompress:{        
        options:{                 
        },        
        files:[{                
            expand:true,                
            cwd:'dev/static/js',                
            src:['**/*.js','!**/*.min.js','!**/*.common.js'],                
            dest:'build/static/js/',                
            ext:'.min.js'            
        }]    
    }
},

uglify:combine 用來(lái)合并文件
uglify:compress用來(lái)壓縮文件
uglify:fileCompress也是用來(lái)壓縮文件
下面兩個(gè)的區(qū)別在于 files中的src：*/.js用來(lái)匹配所有的js荠列，注意类浪，輸出的時(shí)候會(huì)保留目錄層次，如果是合并到一個(gè)文件中肌似，就把dest寫(xiě)成

dest: 'build/static/js/common.js'费就，并且不寫(xiě)ext就可以

grunt配置總體圖

grunt配置一覽圖.png

• 8.運(yùn)行查看效果

在grunt_test目錄下，運(yùn)行g(shù)runt碱鳞，我現(xiàn)在是默認(rèn)執(zhí)行uncss和htmlmin

grunt_done.png

詳細(xì)代碼放在github上面了桑李，鏈接地址：grunt_test