使用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');//替换srcfor(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

使用gulp安装智图压缩图片相关推荐

gulp教程之gulp-imagemin压缩图片
简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片),很多人安装gulp-imagemin都会出现错误,我也查了很多资料,也不知道所以然,我的做法是出错再重新 ...
续Gulp使用入门三步压缩图片
gulp 压缩图片压缩图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码规律找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...
gulp教程之gulp-imagemin（gulp-imagemin压缩图片文件）
原文:http://www.ydcss.com/archives/26 简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片),很多人安装gulp-imagem ...
android设置图片亮度分10档,批处理图片同时调整图片亮度批处理图的大小压缩图片裁边（6页）-原创力文档...
使用Microsoft Office Picture Manager的最大好处是可以批处理文件:可同时处理一批图片的亮度.对比度.调整尺寸大小(压缩图片).旋转图片等,一气呵成. 批处理图片实例操作: ...
Android 高清加载巨图方案拒绝压缩图片
Android 高清加载巨图方案拒绝压缩图片转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自: ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
python等比例压缩图片_python(PIL)图像处理(等比例压缩、裁剪压缩) 缩略(水印)图详解...
#coding:utf-8 ''' python图片处理 @author:fc_lamp @blog:http://fc-lamp.blog.163.com/ ''' import Image as ...
高清加载巨图方案-拒绝压缩图片
Android 高清加载巨图方案拒绝压缩图片转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...
如何用快改图工具指定压缩图片大小
我们在遇到好看的图片或自己拍的照片,都会对其进行一些处理,处理完成后将其保存,保存时发现自己要存的图片太多了,比较占内容.这种情况就需要压缩.那么,在压缩图片时,怎么压缩图片到指定大小呢? 大家可以使 ...
gulp安装流程、使用方法及cmd常用命令导览
gulp安装流程.使用方法及CMD常用命令导览来自前端小白的gulp及周边知识学习总结一.名词介绍: Npm--node包管理工具一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

使用gulp安装智图压缩图片

使用gulp安装智图压缩图片相关推荐

最新文章

热门文章