用gulp-imageisux智图api压缩图片

➣ 智图平台是什么?

智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式。同时,智图平台还会为用户转换一份webp格式的图片。

➣ 如何使用智图平台?

您只需要将要优化的图片拉至首页的拖拽区域后,系统会自动上传图片并经过智图压缩,返回新的图片。您也可以根据自己的实际使用情况选择不同的压缩率。

➣ 智图好在哪里?

智图能够自动为您选择压缩率压缩并且在合适的情况下为您选择正确的图片格式。与此同时,智图也会为您上传的图片转换一份webP格式的图片。

➣ 什么是WebP格式的图片?

WebP是Google在2010年发布的一种新型图片格式,支持无损和有损压缩。在无损压缩方面,同质量的WebP图片比PNG的体积小26%,而在有损压缩方面,同质量的WebP图片比JPEG小25-34%。WebP在不降低图片质量的同时,减少了约三分之一的体积。详细可参考谷歌官方

➣ 我能用WebP格式的图片?

这里为大家总结下使用WebP时需要注意的地方以及如何兼容性地使用WebP格式的图片,点击查看


 首先安装gulp

1 npm install -g gulp                   #全局安装
2 npm install --save-dev gulp           #局部安装    

然后安装gulp-imageisux

1 npm install -g gulp-imageisux             #全局安装
2 npm install --save-dev gulp-imageisux     #局部安装    
  1. 声明图片地址,例如放在img目录下面gulp.src(['img/*'])
  2. 指定参数,压缩图片导出目录/dest/和是否同时导出webp格式。

然后新建文件gulpfile.js

var imageisux = require('gulp-imageisux');

gulp.task('imageisux', function() {
    return gulp.src(['img/*'])
               .pipe(imageisux('/dirpath/',true));
});

API 两个参数,dirpath目标目录以及enableWebp是否同时导出对应WEBP格式图片。(就是imageisux(dirpath,enableWebp))

  • dirpath: 如果未定义,会自动生成两个目录:'/dest/'目录放压缩后图片,'/webp/'目录放对应的webp格式压缩图片。

  • enableWebp : 若为true,则会同时输出webp图片;若为false,则只会有压缩后原格式图片。

智图官网:http://zhitu.isux.us/

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

注明:实验证明jpg、png的图片可以正常压缩,不过gif的好像不可以。

转载于:https://www.cnblogs.com/shoestrong/p/6880082.html

好的,以下是一个使用 `gulp-useref` 并过滤指定 js 文件的示例: ```javascript const gulp = require('gulp'); const useref = require('gulp-useref'); gulp.task('build', function() { return gulp.src('src/*.html') .pipe(useref({ searchPath: ['src', '.'] })) // 过滤掉不需要处理的 js 文件 .pipe(gulp.dest('dist')); }); ``` 在这个示例中,我们使用 `gulp-useref` 来处理 HTML 文件,并将注释块中引用的 JS、CSS 文件合并到一个或多个文件中。同时,我们通过 `searchPath` 属性指定了搜索路径,这样 `gulp-useref` 就能够正确地解析 HTML 文件中的相对路径了。 接着,我们通过 `pipe` 方法将处理后的文件输出到 `dist` 目录中。在这个过程中,我们也可以使用 `gulp-if` 来过滤掉不需要处理的文件。例如,如果我们只想处理所有 `src` 目录下的 JS 文件,可以这样写: ```javascript const gulp = require('gulp'); const useref = require('gulp-useref'); const gulpIf = require('gulp-if'); gulp.task('build', function() { return gulp.src('src/*.html') .pipe(useref({ searchPath: ['src', '.'] })) // 只处理 src 目录下的 js 文件 .pipe(gulpIf('**/*.js', gulp.dest('dist'))) .pipe(gulp.dest('dist')); }); ``` 在这个示例中,我们使用 `gulp-if` 来过滤掉不需要处理的 JS 文件,而只处理 `src` 目录下的 JS 文件。这样,我们就能够只处理我们需要的文件了。 希望这个回答能够帮到你,如果你还有其他问题,可以继续问我。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值