grunt学习入门之一uglify

grunt是前端一个跟很好用的代码管理工具
推荐github: http://blog.csdn.net/ligang2585116/article/details/53790043
如果你懂webpack的话，我个人觉得还是没有grunt好用一点，具体好处，各位看官可以自己去测试，我就不乱水了

言归正传 uglify是grunt的插件之一 代码压缩的

1.安装好node.js
2.安装grunt 命令是npm install grunt -g
3.安装grunt-cli 命令是npm install grunt-cli -g
4.新建项目文件夹 文件夹里面包含js文件夹 css文件夹 build文件夹 Gruntfile.js文件
5.转到项目文件夹安装依赖 npm install grunt –save-dev npm install grunt-contrib-uglify –save-dev
6.在项目文件夹下 输入npm init 生成package.json说明文档
7.以上步骤执行完之后。我们来填写Gruntfile.js文件配置

我们先来搭建大框架

module.exports = function  (grunt){
grunt.initConfig({
//获取package.json数据存储到pkg当中
pkg:grunt.file.readJSON('package.json'),
 //引入插件
    grunt.loadNpmTasks('grunt-contrib-uglify') ,
    //创建默认任务
     grunt.registerTask('default',[]);  
})
}

执行时直接输入 grunt 或者grunt default即可

由于时间原因，直接上配置代码。忘了说了，在你的js文件夹里面先建立a.js和b.js文件用于测试 文件里面写一段符合js语法的代码

module.exports = function(grunt){  

    grunt.initConfig({  
        pkg: grunt.file.readJSON('package.json'),  
        //这里要写之后的任务  

        uglify:{
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//添加banner
            },
            builda: {//任务一：压缩a.js，不混淆变量名，保留注释，添加banner和footer
                options: {
                    mangle: false, //不混淆变量名
                    preserveComments: 'all', //不删除注释，还可以为 false（删除全部注释），some（保留@preserve @license @cc_on等注释）
                    footer:'\n/*! <%= pkg.name %> 最后修改于： <%= grunt.template.today("yyyy-mm-dd") %> */'//添加footer
                },
                files: {
                    'output/js/a.min.js': ['js/a.js']
                }
            },
            buildb:{//任务二：压缩b.js，输出压缩信息
                options: {
                    report: "min"//输出压缩率，可选的值有 false(不输出信息)，gzip
                },
                files: {
                    'output/js/b.min.js': ['js/main/b.js']
                }
            },
            buildall: {//任务三：按原文件结构压缩js文件夹内所有JS文件
                files: [{
                    expand:true,
                    cwd:'js',//js目录下
                    src:'**/*.js',//所有js文件
                    dest: 'output/js'//输出到此目录下
                }]
            },
            release: {//任务四：合并压缩a.js和b.js
                files: {
                    'output/js/index.min.js': ['js/a.js', 'js/main/b.js']
                }
            }
          }

    });  

    //引入插件
    grunt.loadNpmTasks('grunt-contrib-uglify') 

    //default任务，即默认任务，执行命令为grunt或grunt default  
    grunt.registerTask('default',['uglify:release']);  
    grunt.registerTask('task2',['uglify:buildall'])

    //两个任务名字不同可同时存在，执行时只要输入grunt+名字即可，如下：grunt start  
    grunt.registerTask('start',['connect','watch:start']); 
}; 

如此。你便可以将a和b打包压缩了。挺快。对开发有了巨大的好处