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：监视文件变动，做出相应动作。