用Grunt進行CSS檔案壓縮

標籤：log   module   images   ports   pmt   spec   grunt   eps   cat   

假設你的項目的CSS檔案全部放在項目目錄下名為css的檔案夾中，現在將它壓縮合并成一個名為main-min.css的檔案，放在css-min檔案夾下。

（1）首先保證機器安裝了node.js.

（2）在項目的目錄下建立名為package.json的檔案,用於配置需要安裝的npm包，package.json的內容如下：

{  "author": "evan <[email protected]>",  "name": "CSS_ZIP",  "description": "CSS壓縮",  "version": "0.0.1",  "engines": {    "node": ">=0.8.0"  },  "dependencies": {    "grunt" : "~0.4.2",    "grunt-contrib-uglify" : "~0.2.7",    "grunt-contrib-concat" : "~0.3.0",    "grunt-contrib-cssmin" : "x"  }}

必須填寫的是dependencies部分，需要用json格式填上npm包上的名稱和版本號碼，版本號碼用x來代替。這裡我們用了Grunt和Grunt的一個用於合并壓縮CSS的外掛程式grunt-contrib-cssmin。

（3）完成以上後，從命令列進入項目目錄下，（需要對Node.js的命令操作有所瞭解）執行命令：npm install 

該命令會建立一個名為node——module的檔案夾（如果不存在），將Grunt以及Grunt外掛程式安裝在該檔案夾下。

（4）編寫Grunt設定檔Gruntfile.js。在項目目錄下建立Gruntfile.js作為Grunt的設定檔，內容如下：

module.exports = function(grunt) {  // Do grunt-related things in here  // 配置    grunt.initConfig({                concat :         {            options: {                     separator: ‘;‘,                     stripBanners: true                 },                             dist : {                src: [‘page/jquery.js‘, ‘page/jquery_md5.js‘,‘page/moment.js‘,‘page/main.js‘],                dest: ‘dist/main.js‘            }        },        uglify : {                        build : {                src : ‘dist/main.js‘,                dest : ‘dist/main.min.js‘            }        },        cssmin: {               options: {                   keepSpecialComments: 0               },               compress: {                   files: {                       ‘css-min/main-min.css‘: [                           "css/*.css"                       ]                   }               }           }            });    // 載入concat和uglify外掛程式，分別對於合并和壓縮    grunt.loadNpmTasks(‘grunt-contrib-concat‘);    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);        // 註冊任務    grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘,‘cssmin‘]);}

（5）上一步完成後，在命令列中執行：Grunt

這時，就可以看到後台自動建立了一個名為css-min的檔案夾，檔案夾中是一個名為css-min.css的檔案，內容是css檔案中css檔案的合并壓縮後的結果，最終的目錄結構圖如下：

以後如果CSS檔案被修改，只要執行Grunt命令就可以了。

 

用Grunt進行CSS檔案壓縮