初學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等