初学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") %> */
'
            },
            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") %> */
',
			        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等