Gulp-web-replace
使用 gulp-webp 转换图片后,针对CSS和Html文件进行对应资源引用的替换。
About gulp-webp:
Convert images to WebP
Supports PNG, JPEG, TIFF, WebP.
Install
$ npm install --save-dev gulp-webp gulp-replace
Usage gulp-webp & gulp-web-replace
const gulp = ;const webp = ;const webpReplace = ;const rename = ; { return gulp // 可先重命名图片文件名*.jpg.web 也可省略此步骤 // 转换完webp后,运行插件记录前后文件名变化 }//编译 css { return gulp // .pipe(postcss()) // 替换css的webp链接 } { let options = match: "img[src]" attr: "src" match: "input[src]" attr: "src" match: "video[poster]" attr: "poster" match: "img[data-ng-src]" attr: "data-ng-src" ; return gulp // 可以先进行一些编辑前置工作 // .pipe(postHtml([require('posthtml-include')({ // root: _path, // encoding: 'utf8' // })])) // .pipe(inlineSource(options)) //处理webp的引用链接,再在这后面处理cdn等链接替换 ; }
API
A gulp plugin inspired by [trumpet(https://github.com/tivac/trumpet).
使用的trumpet插件来处理html
Will prefix relative urls in <link>
, <script>
and <img>
tags
可以在处理html的时候传入一个对像数组,每个对像的
-
math css查询表达式,通过这个表达式匹配html元素
-
attr 需要替换掉匹配到的html元素的属性值
You can optionally pass a second argument along with the prefix string to override the default selection statements. The default config looks like this:
match: "script[src]" attr: "src" match: "link[href]" attr: "href" match: "img[src]" attr: "src" match: "input[src]" attr: "src"
webp API
webp(options?)
See the imagemin-webp
options.
Note that unsupported files are ignored.