前端js和css的压缩合并之grunt

使用前提

grunt是基于node的，要在你电脑上使用grunt，电脑上必须已安装node环境。具体node环境的安装和搭建。centos请看，windows安装相对简单，下载安装包安装就可以了。关于mac的安装，后面有时间在详细介绍。

新建package.json

package.json放在根目录(例如：C:\Users\123)下，它包含了该项目的一些元信息，如项目名称、描述、版本号，插件等。

{  "name": "haorooms.com",  "version": "v0.1.0",  "devDependencies": {    "grunt": "~0.4.5",    "grunt-contrib-jshint": "~0.10.0",    "grunt-contrib-nodeunit": "~0.4.1",    "grunt-contrib-uglify": "~0.5.0",    "grunt-contrib-concat": "~0.5.1",    "grunt-contrib-cssmin": "~0.12.3",    "grunt-htmlhint": "~0.9.2"  }}

grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是常用的插件。

更多插件，请访问：http://gruntjs.com/plugins

插件安装

安装：uglify

npm install grunt-contrib-uglify

安装concat

npm install grunt-contrib-concat

安装：cssmin

npm install grunt-contrib-cssmin

插件安装完成后，查看根目录，会发现node_modules目录，包含了相应的插件目录。

新建Gruntfile.js

Gruntfile.js由以下内容组成

1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API

   module.exports = function(grunt) {      // Do grunt-related things in here    };

2、项目和任务配置

3、载入grunt插件和任务

4、定制执行任务

例如：

 module.exports = function(grunt) {  //配置参数  grunt.initConfig({     pkg: grunt.file.readJSON('package.json'),     concat: {         options: {             separator: ';',             stripBanners: true         },         dist: {             src: [                 "js/config.js",                 "js/smeite.js",                 "js/index.js"             ],             dest: "assets/js/default.js"         }     },     uglify: {         options: {         },         dist: {             files: {                 'assets/js/default.min.js': 'assets/js/default.js'             }         }     },     cssmin: {         options: {             keepSpecialComments: 0         },         compress: {             files: {                 'assets/css/default.css': [                     "css/global.css",                     "css/pops.css",                     "css/index.css"                 ]             }         }     }  });  //载入concat和uglify插件，分别对于合并和压缩  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-cssmin');  //注册任务  grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);}

也可以单独压缩js和css，不进行合并，例如：

module.exports = function (grunt) {    // 构建任务配置    grunt.initConfig({        //读取package.json的内容，形成个json数据        pkg: grunt.file.readJSON('package.json'),        //压缩js        uglify: {            //文件头部输出信息            options: {                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'            },            my_target: {                files: [                    {                        expand: true,                        //相对路径                        cwd: 'js/',                        src: '*.js',                       //src: ['**/*.js', '!**/*.min.js'],  //不包含某个js,某个文件夹下的js                        dest: 'dest/js/',                        rename: function (dest, src) {                                    var folder = src.substring(0, src.lastIndexOf('/'));                                    var filename = src.substring(src.lastIndexOf('/'), src.length);                                    //  var filename=src;                                    filename = filename.substring(0, filename.lastIndexOf('.'));                                    var fileresult=dest + folder + filename + '.min.js';                                    grunt.log.writeln("现处理文件："+src+"  处理后文件："+fileresult);                                    return fileresult;                                    //return  filename + '.min.js';                                }                     }                ]            }        },        //压缩css        cssmin: {            //文件头部输出信息            options: {                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',                //美化代码                beautify: {                    //中文ascii化，非常有用！防止中文乱码的神配置                    ascii_only: true                }            },            my_target: {                files: [                    {                        expand: true,                        //相对路径                        cwd: 'css/',                        src: '*.css',                        dest: 'dest/css/',                        rename: function (dest, src) {                                  var folder = src.substring(0, src.lastIndexOf('/'));                                  var filename = src.substring(src.lastIndexOf('/'), src.length);                                  //  var filename=src;                                  filename = filename.substring(0, filename.lastIndexOf('.'));                                  var fileresult=dest + folder + filename + '.min.css';                                  grunt.log.writeln("现处理文件："+src+"  处理后文件："+fileresult);                                  return fileresult;                                //return  filename + '.min.js';                                }                    }                ]            }        }    });    // 加载指定插件任务    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.loadNpmTasks('grunt-contrib-cssmin');    // 默认执行的任务    grunt.registerTask('default', ['uglify', 'cssmin']);};

grunt api文档：http://gruntjs.com/api/grunt

grunt.initConfig方法

用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：

expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。

cwd：需要处理的文件（input）所在的目录。

src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。

dest：表示处理后的文件名或所在目录。

ext：表示处理后的文件后缀名。

grunt常用函数说明：

grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。

grunt.loadNpmTasks：加载完成任务所需的模块。

grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。

命令行执行grunt任务

进入到项目根目录，敲：

grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行，例执行js压缩命令：

grunt uglify

css压缩命令

grunt cssmin

转载链接：http://www.haorooms.com/post/qd_grunt_cssjs