如何用grunt压缩并合 js/css

1 使用前提： grunt是基于node 环境，所以必须先搭建node环境（这里不做详细介绍自己查）

2 入门介绍：

先安装grunt npm install -g grunt-cli

文件介绍 ：package.json是依赖库文件 Gruntfile.js是执行步骤程序
package.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，插件等。

{
"name": "hlcc",
"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语法验查）

我们配置好package.json 文件后执行 npm install 即可安装这些插件了。

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

3 测试
新建Gruntfile.js
我们需要先创建一些文件夹，并将需要压缩的js、css 文件放入对应的文件夹里面（看下面代码里说明），注意需要给 这些文件可写的权限。 一般执行 chmod -R 777 assets dest js ，即可。

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"
             ]
         }
     }
 }

});
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']);

};

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

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

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

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

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

进入到项目根目录 执行 grunt 就会按Gruntfile配置的文件进行压缩合并

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

css压缩命令 grunt cssmin

如有疑问联系 1343948033@qq .com