应用Grunt进行CSS压缩

应用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插件，用于合并和压缩CSS
   grunt.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命令即可。