Grunt 依賴 Node.js 所以在安裝之前確保你安裝了 Node.js。然後開始安裝 Grunt

實際上，安裝的並不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，這樣你就可以使用 grunt 命令來執行某個項目中的 Gruntfile.js 中定義的 task 。但是要註意，Grunt-cli 只是一個命令行工具，用來執行，而不是 Grunt 這個工具本身

• 1.安裝node

  node.js安裝教程

• 2.grunt命令行（CLI） 安裝在全局環境下，所以命令是這麽寫滴！

  npm install -g grunt-cli

• 3.新建一個項目，名字叫grunt_test：註意，千萬不要叫grunt，後面運行grunt命令的時候會出錯

  下面是我的項目目錄

  
  QQ截圖20161222155458.png

• 4.生成package.json，也可以手動生成這樣一個文件

  npm init

生成之後在裏面填入以下內容

• 5.安裝grunt

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

偶？自動把grunt的版本號加上啦。對啦，這就是--save-dev的作用

• 6.安裝grunt插件

js語法檢查:grunt-contrib-jshint
安裝命令：npm install grunt-contrib-jshint --save-dev 下同
css語法檢查：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插件後，我運行grunt，發現報錯，提示ruby沒有安裝，所以如果需要使用到這個插件的，要確保自己的電腦上是否有裝ruby，沒有的話要進行安裝
sudo yum install ruby

# CentOS, Fedora, 或 RHEL 系統
sudo apt-get install ruby-full # Debian 或 Ubuntu 系統
brew install ruby #蘋果系統
Less 編譯：grunt-contrib-less
監聽文件變動：grunt-contrib-watch
建立本地服務器：grunt-contrib-connect

上面這些插件都安裝好後，註意看package.json文件中的內容

• 7.配置Gruntfile.js

這裏是對每個需要的插件進行配置

插件太多了，挑其中一個(uglify，用於js壓縮)進行詳細說明

grunt是任務機制，我在這裏給定了combine、compress、fileCompress三個任務，執行grunt時會按順序執行三個任務
>

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 用來合並文件
uglify:compress用來壓縮文件
uglify:fileCompress也是用來壓縮文件
下面兩個的區別在於 files中的src：*/.js用來匹配所有的js，註意，輸出的時候會保留目錄層次，如果是合並到一個文件中，就把dest寫成

dest: ‘build/static/js/common.js‘，並且不寫ext就可以

grunt配置總體圖

最後一行代碼是註冊任務，當然，除了default，我們也可以註冊到別的Task上去，比如grunt.registerTask(‘compress‘, [‘uglify:build‘]);
如果想要執行這個 task，我們就不能只輸入 grunt 命令了，我們需要輸入 grunt compress命令來執行這條 task，而這條 task 的任務是 uglify 下面的 build 任務，也就是說，我們只會執行 uglify 裏面 build 定義的任務，而不會執行 uglify 裏面定義的其他任務。
這裏需要註意的是，task 的命名不能與後面的任務配置同名，也就是說這裏的 compress 不能命名成 uglify，這樣會報錯或者產生意外情況

• 8.運行查看效果

  在grunt_test目錄下，運行grunt，我現在是默認執行uncss和htmlmin

Grunt-學習。