Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xvoland/gulp-xv-webp-html

GULP extension for support tag <picture> WEBP images and replaced original image tag in HTML in other words: replace <img> to <picture> for supports webp
https://github.com/xvoland/gulp-xv-webp-html

avif gulp gulp-plugin gulp-tasks gulp-webp gulp-webp-html gulp-xv gulpjs html jpg nodejs npm-module npm-package picture plugins svg tag-image tag-picture webp webp-fix

Last synced: 3 days ago
JSON representation

GULP extension for support tag <picture> WEBP images and replaced original image tag in HTML in other words: replace <img> to <picture> for supports webp

Host: GitHub
URL: https://github.com/xvoland/gulp-xv-webp-html
Owner: xvoland
License: mit
Created: 2021-05-30T00:03:35.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-03-28T12:31:29.000Z (6 months ago)
Last Synced: 2024-04-14T00:37:52.612Z (6 months ago)
Topics: avif, gulp, gulp-plugin, gulp-tasks, gulp-webp, gulp-webp-html, gulp-xv, gulpjs, html, jpg, nodejs, npm-module, npm-package, picture, plugins, svg, tag-image, tag-picture, webp, webp-fix
Language: JavaScript
Homepage:
Size: 239 KB
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # gulp-xv-webp-html.js

GULP extension for support WEBP images and replace original image tag in HTML

in other words: replace `` to `` for supports webp

**Support file extensions:**  `.jpg, .png, .gif, .jpeg, .avif, .svg, .tiff`

[NPM package home page][npm]

**This NodeJS package is a nice addition to my [HTML-template](https://github.com/xvoland/gulp-xv-HTML-Template) with live update and support SCSS.**

*P.S.: I wrote this npm-package because others similar had errors and sometimes didn't work correctly with the input data.*

## Output Example

#### Example #1

```html

// Input



```

```html

// Output

    

    

    

```

#### Example #2

```html

// Input



```

```html

// Output

    

    

    

```

Also, more practical of use you can find in my other project [Gulp-xv-HTML-Template](https://github.com/xvoland/gulp-xv-HTML-Template)

## Install

```bash

npm i --save-dev gulp-xv-webp-html

```

## Usage

Given a `package.json` file that has some dependencies within:

```json

{

  "dependencies": {

    "plugin-error": "^1.0.0",

    "through2": "^4.0.2"

  }

}

```

Adding this into your `Gulpfile.js`:

```javascript

const gulp = require('gulp')

const webpHTML = require("gulp-xv-webp-html")

```

#### Example #1

```javascript

var webpHTML = require('gulp-xv-webp-html');

function html() {

    return  src('./source/*.html')

            .pipe(webpHTML())

            .pipe(gulp.dest('./destHTML/'))

});

exports.html = html;

```

#### Example #2

```javascript

var webpHTML = require('gulp-xv-webp-html');

gulp.task("webpHTML", function(){

    return gulp.src(['./sourceHTML/**/*.html'])

           .pipe(webpHTML())

           .pipe(gulp.dest('./destHTML/'))})

```

#### Example #3

```javascript

var webpHTML = require('gulp-xv-webp-html');

gulp.task("webpHTML", function(){

    return gulp.src(['./sourceHTML/**/*.html'])

           .pipe(webpHTML(['.jpg', '.svg']))

           .pipe(gulp.dest('./destHTML/'))})

```

## Visualization of npm dependency

![Default view](https://github.com/xvoland/gulp-xv-webp-html/raw/main/images/gulp-xv-webp-html.png)

Follow link for live view: [View live 2D map](https://npm.anvaka.com/#/view/2d/gulp-xv-webp-html)

## Liked it?

Hope you liked this project, don't forget to give it a star ⭐.

## Donation & Sponsors

I’ll continue to work and improve the script features regardless of the outcome of funding, because it's rewarding to see that people are using it and it does the job for them. Still I would appreciate your support in covering some of the expenses with the domain hosting and programming hours which are taken from my family time.

[Donate any amount for my projects][paypal]



---

![GitHub stats](https://github-readme-stats.vercel.app/api?username=xvoland&show_icons=true&theme=radical&hide_border=true)

## Other

📺 Latest my YouTube Videos

- [🙈 Emoji Kitchen | Make Emoji Cool On Your Phone](https://www.youtube.com/watch?v=H1CSRdz1Q-8)

- [💡👀🪢  Knot - Double Back. Useful knot tying techniques](https://www.youtube.com/watch?v=yj63cRi7ezo)

- [Mango and Avocado at Home. 6 months later in Ukraine](https://www.youtube.com/watch?v=qWZ7j34-UFQ)

- [🔥👟 Fish Back Knot. How To Tie Knots Tutorial.](https://www.youtube.com/watch?v=vC8rHM9Exo8)

- [🛠 QCY headphones. Battery Replacement guide](https://www.youtube.com/watch?v=ePrKIcYn4_g)

➡️ [more videos...][youtube]

## License

Author [Vitalii Tereshchuk][home]. © 2021, MIT license.

Or welcome to my [YouTube channel][youtube]

[home]: http://dotoca.net

[npm]: https://www.npmjs.com/package/gulp-xv-webp-html

[paypal]: https://paypal.me/xvoland

[youtube]: https://youtube.com/xvoland

[instagram]: https://www.instagram.com/xvoland/

[hosting]: https://goo.gl/3KpxQI

[opencollective]: https://opencollective.com/extract/backers/0/website