1.安裝node.js

2.新建package.json檔案

{
  "name": "demo",
  "version": "2.0.1",
  "author":"",
  "email":"",
  "webAddr":"",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-cmd-transport": "~0.3.0",  
    "grunt-cmd-concat": "~0.2.5",  
    "grunt-contrib-concat":"*",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-requirejs": "~0.4.1",  
    "grunt-contrib-copy":"*",
    "grunt-contrib-cssmin":"*",  
    "grunt-strip": "~0.2.1" 
  }
}
 

cmd : npm install

4.建立Gruntfile.js

module.exports = function (grunt) {
    var version = 2.0;
    // 構建任務配置
    grunt.initConfig({

        //讀取package.json的內容，形成個json資料
        pkg: grunt.file.readJSON('package.json'),
        //壓縮css
        cssmin: {
            //檔案頭部輸出資訊
		  main:{
            options: {
                 banner: '/*!webAddr:<%= pkg.webAddr %>, author:<%= pkg.author %>, email:<%= pkg.email %>, version:v-<%= grunt.template.today("yyyy-mm-dd") %>:'+version+' */\n',
                paths:["css"],
                //美化程式碼
                beautify: {
                    //中文ascii化，非常有用！防止中文亂碼的神配置
                    ascii_only: true
                }
            },
          
                files: [
                    {
                        expand: true,
                        //相對路徑
                        cwd: 'css/',
                        src: ['*.css','!*.min.css'],
                        dest: 'css/',						
						ext:".min.css"
                    }
                ]      
         }
	  }
    });

    // 載入指定外掛任務
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 預設執行的任務
    grunt.registerTask('default', ['cssmin']);
};
 

grunt.initConfig方法說明

用於模組配置，它接受一個物件作為引數。該物件的成員與使用的同名模組一一對應。

每個目標的具體設定，需要參考該模板的文件。就cssmin來講，minify目標的引數具體含義如下：

• expand：如果設為true，就表示下面檔名的佔位符（即*號）都要擴充套件成具體的檔名。
• cwd：需要處理的檔案（input）所在的目錄。
• src：表示需要處理的檔案。如果採用陣列形式，陣列的每一項就是一個檔名，可以使用萬用字元。
• dest：表示處理後的檔名或所在目錄。
• ext：表示處理後的檔案字尾名。

grunt常用函式說明：

grunt.initConfig：定義各種模組的引數，每一個成員項對應一個同名模組。
grunt.loadNpmTasks：載入完成任務所需的模組。
grunt.registerTask：定義具體的任務。第一個引數為任務名，第二個引數是一個數組， 表示該任務需要依次使用的模組。

grunt常用模組：

• grunt-contrib-clean：刪除檔案。
• grunt-contrib-compass：使用compass編譯sass檔案。
• grunt-contrib-concat：合併檔案。
• grunt-contrib-copy：複製檔案。
• grunt-contrib-cssmin：壓縮以及合併CSS檔案。
• grunt-contrib-imagemin：影象壓縮模組。
• grunt-contrib-jshint：檢查JavaScript語法。
• grunt-contrib-uglify：壓縮以及合併JavaScript檔案。
• grunt-contrib-watch：監視檔案變動，做出相應動作。