使用grunt实现css压缩

一、安装grunt-cli

安装Grunt命令行（CLI）：

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到系统路径中了，以后就可以在任何目录下执行此命令了。

注1：-g代表全局安装，Grunt有二个版本：服务器端版本（grunt）和客户端版本（grunt-cli）。

注2：安装grunt-cli并不等于安装了grunt！grunt CLI的任务很简单：在项目目录下执行grunt命令 则调用项目目录下的调用与Gruntfile.js文件。

二、实现压缩css文件的步骤

1、创建项目目录：比如项目目录创建为D:\mygrunt

2、开始新建项目

在该目录下执行cmd

输入 npm init 

一直回车就可以创建好package.json文件

3、安装最新版的Grunt：
npm install grunt --save-dev

4、接着安装我们所需要的插件：
npm install grunt-contrib-cssmin --save-dev
注：其中--save-dev，表示将它作为你的项目依赖添加到package.json文件中devDependencies内。

5、创建Gruntfile.js文件：

module.exports = function(grunt) {
    // 配置任务参数
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            combine: {
                files: {
                  'css/release/compress.css': ['css/*.css'] // 指定合并的CSS文件 ['css/base.css', 'css/global.css']
                }
            },
           minify: {
                options: {
                    keepSpecialComments: 0, /* 删除所有注释 */
                    banner: '/* minified css file */'
                },
                files: {
                    'css/release/master.min.css': ['css/master.css']
                }
            }
        }
    });
 
    // 插件加载（加载 "cssmin" 模块）
    grunt.loadNpmTasks('grunt-contrib-cssmin');
 
    // 自定义任务：通过定义 default 任务，可以让Grunt默认执行一个或多个任务。
    grunt.registerTask('default', ['cssmin']);
 
};

6、在该项目目录下执行grunt命令即可在D:\mygrunt\css\release目录下生成我们需要的压缩后的css文件

说明：

执行配置中所有的任务：
grunt
执行某个特定的任务：
grunt cssmin