应用Grunt进行CSS压缩

---

绝大多数情况下，项目完成后需要将CSS文件进行合并压缩后再部署到生产环境上，这样既可以减少网站的HTTP请求数量，提高加载速度，又可以降低网站的流量开销，降低成本。将多个CSS文件合并压缩为一个文件，如果每次手工粘贴到一起再压缩实在是麻烦，而且很难应对频繁的修改，很容易造成生产环境和开发环境的不一致。对于这个问题，可以采用Grunt来进行JS/CSS自动化的压缩、合并。

Grunt是一个基于Node.js的任务运行工具，用于执行各种需要自动化的任务。

下面介绍如何运用Grunt进行CSS压缩。

假设项目的CSS文件全部放在项目目录下名为css的文件夹中，现在要把它们压缩合并为一个名为main-min.css的文件，放在css-min的文件夹下。

1. 首先保证安装了Node.js。

2. 在项目目录下建立名为package.json的文件，用于配置需要安装的npm包（npm: Node.js的包管理系统），package.json的内容如下：

   {    "name"："CSS_ZIP",    "description":"CSS压缩",    "engine":{"node":">=0.8.0"},    "dependencies":{        "grunt":"~0.4.2",        "grunt-contrib-cssmin":"x"    }}

   必须填写dependecies部分，需要用json格式填上npm包的名称和对应的版本号，版本号可以用x来代替。这里我们用到了Grunt和Grunt的一个用于合并压缩CSS的插件grunt-contrib-cssmin。

3. 完成后从命令行进入到项目目录下，执行命令

   $npm install

4. 编写Grunt配置文件Gruntfile.js。在项目目录下新建文件Gruntfile.js作为Grunt的配置文件，内容如下：

   module.exports = function(grunt){//配置grunt.initConfig({    cssmin:{        options:{            keepSpecialComments:0        },        compress:{            files:{                'css-min/main-min.css':["css/*.css"]            }        }    }});//载入cssmin插件，用于合并和压缩CSSgrunt.loadNpmTasks('grunt-contrib-cssmin');//注册任务grunt.registerTask('default',['cssmin']);}

5. 上一步完成后，在命令行中执行：
   grunt


   注意：需要先将Grunt命令行（CLI）安装到全局环境中，执行命令
   
npm install -g grunt-cli

   上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。注意，安装grunt-cli并不等于安装了 Grunt。Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。

6. 这时就可以看到后台自动新建了一个名为css-min的文件夹，文件夹中是一个名为main-min.css的文件，内容是css文件夹中所有.css文件合并压缩后的结果。

以后如果CSS有任何修改，只要执行grunt命令即可。