使用gulp安装智图压缩图片

使用智图压缩图片

1、安装gulp构建工具

cmd npm install -g gulp

2、安装插件

cmd npm install -g gulp-imageisux

3、安装完毕后，会在C:/Users/Administrator/AppData/Roaming/npm/node_modules目录中生成gulp和gulp-imageisux文件夹，在gulp文件夹中创建gulpfile.js文件（注意：文件名不可以更改），以下是gulpfile.js文件中代码

var gulp = require('gulp');
var imageisux = require('gulp-imageisux');
//task指定任务，第一个参数为任务名，default为默认，调用gulp会自动执行
gulp.task('default',function(){
	return gulp.src(['C:/Users/Administrator/Desktop/img/*'])
			   .pipe(imageisux('',true));
})

4、cmd中执行gulp

cmd C:/Users/Administrator/AppData/Roaming/npm/node_modules/gulp/gulp

注意：执行时应是gulp+任务名，比如gulp task1，因为该任务名指定为default，所以可以省略，直接gulp即可运行

5、运行成功会生成dest和webp两个文件夹，保存压缩后的对应格式的图片

需要注意的地方：

1、imageisux()有两个参数，第一个参数表示压缩后的图片的保存路径，默认会生成dest和webp两个目录，第二个参数表示是否生成webp格式的图片

2、gulp.src中的图片路径为*时则表示压缩该文件夹下的所有图片

3、gulp通过gulpfile文件来完成相关任务，项目中必须包含gulpfile.js，不要去修改gulpfile.js的文件名，并且确保是放在gulp文件夹目录下

4、需要扩展gulp组件，直接在gulpfile.js文件中添加任务即可

https://github.com/targetkiller/gulp-imageisux

补充：

1、在项目中PNG格式图片较多，在压缩时，部分图片总是提示ERROR，无法生成WEBP和PNG格式的图片，不知道什么原因

2、压缩时好像无法选择压缩质量，且压缩后的图片的大小减少的并不多，后来测试了gulp-imagemin，感觉也差不多，可能是无损压缩的原因

3、另一个压缩工具，支持有损压缩和无损压缩，主要针对PNG、APNG、WEBP格式的转换：iSparta

JS检测浏览器是否支持WEBP格式：

//测试浏览器是否支持webp格式图片
var testWebp = function(callback){
	var image = new Image();
	image.onerror = function(){
		callback(false);
	}
	image.onload = function(){
		callback(image.width == 1);
	}
	//传入一张1px像素的webp格式的图片测试
	image.src = 'images/webp/testWebp.webp';
}
testWebp(function(isSupport){
	//浏览器支持webp格式
	if(isSupport){
		var img = document.getElementsByTagName('img');
		//替换src
		for(var i = 0, len = img.length; i < len; i++){
			img[i].src = img[i].src.replace('images/','images/webp/').replace('.png','.webp');
		}
	}
});

浏览器兼容： http://caniuse.mojijs.com/Home/Html