Grunt 單獨對css壓縮並生成min.css文件

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" 
  }
}

3.然後安裝 grunt所需的包

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：監視文件變動，做出相應動作。