初学grunt压缩

初学grunt 压缩，做个记录。备忘。

【JS压缩】

先比较yui compressor 与 uglify  代码压缩，

yui compressor，使用起来很简单。需要jdk。

https://github.com/yui/yuicompressor/releases
使用方式
//压缩js
java -jar yuicompressor-2.4.8.jar --type js --charset utf-8 -v jquery-ui.js > jquery-ui.min.js
//压缩css
java -jar yuicompressor-2.4.8.jar --type css --charset utf-8 -v src.css > packed.css

为了方便，推荐使用TB compressor，右键即可操作。

Uglify ，grunt中插件。需要nodejs环境。JQuery即采用此压缩。 

安装：npm install grunt-contrib-uglify --save-dev

Grunt安装等详细操作，参考前辈的教程：http://blog.csdn.net/wangfupeng1988/article/details/46418203

uglify的详细配置使用可参考：http://www.cnblogs.com/artwl/p/3449303.html

自己写的一个可以批量的Gruntfile.js：

module.exports =  function(grunt){grunt.initConfig({pkg: grunt.file.readJSON('package.json'),  uglify:{            options:{                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +                    '<%= grunt.template.today("yyyy-mm-dd") %> */\n'            },            releaseJS:{                files:[{                    expand: true,                    cwd:'src/js',  //源目录                    ext:'.min.js', //压缩名后缀                    src:'**/*.js', //所有js                    dest:'release/js' //压缩到此目录                }]            }        },});grunt.loadNpmTasks('grunt-contrib-uglify');grunt.registerTask('default',['uglify']);}

尝试写了个js压缩下，针对这个js后者压缩率更高些。条件选择压成三目，1000变为1e3。

/* 原有js */function randomUrl(url){    if(url.indexOf('?')==-1){        return url+='?t=' + Math.random(1000);    }else{        return url+='&t=' + Math.random(1000);    }}/*! YUI compressor*/function randomUrl(a){    if(a.indexOf("?")==-1){        return a+="?t="+Math.random(1000)    }else{        return a+="&t="+Math.random(1000)    }}<pre name="code" class="javascript">/*! grunt_test - v1.0.0 - 2016-03-02 */function randomUrl(a){    return a+=-1==a.indexOf("?")?"?t="+Math.random(1e3):"&t="+Math.random(1e3)}

在线压缩：http://tool.css-js.com/

【css压缩】

可用cssmin 压缩css。

测试时 曾发现一个文件压缩后反而变大了，仔细对比了下，发现原css中用@import引入了其他css。压缩后直接把导入的东西一并压缩了，反而越压越大。

查询npm的这个插件官网时，在“Release history”中看到一句话 “2013-05-25 v0.6.1 Support import in-lining vis clean-css ~1.0.4.”

可能是本问题的原因。

安装：npm install grunt-contrib-cssmin --save-dev

配置：

<pre name="code" class="javascript">cssmin:{options:{banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +                '<%= grunt.template.today("yyyy-mm-dd") %> */\n',        beautify: {                    //中文ascii化，防中文乱码                    ascii_only: true                    }        },                releaseCSS:{            files:[{                expand: true,                cwd:'app_source/css',  //源目录               // ext:'.min.css', //压缩名后缀  注释掉表示用原名字                src:'**/*.css', //所有css                dest:'release/css' //压缩到此目录            }]        }},

【图片压缩】

imagemin图像压缩

安装：npm install grunt-contrib-imagemin --save-dev

配置

imagemin: {        options: {            optimizationLevel: 3 // png图片优化水平，3是默认值，取值区间0-7        },        releaseIMG: {        files:[{                expand: true, // 开启动态扩展                cwd: "src/images/", // 当前工作路径                src: ["**/*.{png,jpg,gif}"], // 要出处理的文件格式(images下的所有png,jpg,gif)                dest: "images/" // 可设置同输出目录(直接覆盖原图)            }]        }        },

concat合并之类都类似。

参考：http://www.cnblogs.com/hubcarl/p/4095122.html

执行命令：

d: 、cd等各种命令，先进入项目根目录，然后直接grunt。

 

也可以单独执行命令 如  grunt uglify   或 grunt  cssmin等