-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.js
145 lines (120 loc) · 6.36 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
"use strict";
/* gulp-xv-webp-html */
/*!
* index.js
*
* © Copyright 2021, Vitalii Tereshchuk https://dotoca.net
* Released under the MIT license
* Github: https://github.com/xvoland/gulp-xv-webp-html.git
*
* Date: May 30, 2021
*/
const pluginName = 'gulp-xv-webp-html'
const gutil = require('gulp-util')
const PluginError = gutil.PluginError
const through = require('through2')
module.exports = function (extensions) {
// support extensions in lower/upper case
var extensions = extensions || ['.jpg', '.png', '.gif', '.jpeg','.avif', '.svg', '.tif']
return through.obj(function (file, enc, cb) {
if (file.isNull()) {
cb(null, file)
return
}
if (file.isStream()) {
cb(new PluginError(pluginName, 'Streaming not supported'))
return
}
try {
var inPicture = false
const data = file.contents
.toString()
.split('\n')
.map(function (line) {
/* inside/outside of tag <picture> ? */
if (line.indexOf('<picture') + 1) inPicture = true
if (line.indexOf('</picture') + 1) inPicture = false
/* check image tag <img> */
if (line.indexOf('<img') + 1 && !inPicture) {
/* extract each image src */
var Re = /<img([^>]+)src=[\"\'](\S+)[\"\']([^>\/]+)\/?>/gi
var regexpArray = Re.exec(line)
var imgTag = regexpArray[0] // orig image tag
var srcImage = regexpArray[2] // src URL
var newWebpUrl = srcImage // for new URL
/* exit if in URL .webp */
if (srcImage.indexOf('.webp') + 1) return line
extensions.forEach(ext => {
// console.log( '---> SRC: ' + ext + ' ' + srcImage + ' ' + srcImage.indexOf(ext) )
if ( srcImage.indexOf(ext) == -1 ) {
// doesn't require replacement
return line;
} else {
/* replace all occurrences of the extensions */
// console.log(newWebpUrl + ' <---REPLACE');
newWebpUrl = newWebpUrl.replace(ext, '.webp')
/* create output HTML with tag <picture> */
switch (ext) {
case '.jpg':
line = '<picture>'+
'<source srcset="' + newWebpUrl + '" type="image/webp">' +
'<source srcset="' + srcImage + '" type="image/jpeg">' +
imgTag +
'</picture>'
break;
case '.png':
line = '<picture>'+
'<source srcset="' + newWebpUrl + '" type="image/webp">' +
'<source srcset="' + srcImage + '">' +
imgTag +
'</picture>'
break;
case '.svg':
line = '<picture>'+
'<source srcset="' + newWebpUrl + '" type="image/webp">' +
'<source srcset="' + srcImage + '" type="image/svg+xml">' +
imgTag +
'</picture>'
break;
case '.avif':
line = '<picture>'+
'<source srcset="' + srcImage + '" type="image/avif">' +
'<source srcset="' + newWebpUrl + '" type="image/webp">' +
imgTag +
'</picture>'
break;
case '.gif':
line = '<picture>'+
'<source srcset="' + srcImage + '" media="(prefers-reduced-motion: reduce)">' +
imgTag +
'</picture>'
break;
case '.tif':
line = '<picture>'+
'<source srcset="' + srcImage + '" type="image/tiff">' +
'<source srcset="' + newWebpUrl + '" type="image/webp">' +
imgTag +
'</picture>'
break;
default:
line = '<picture>'+
'<source srcset="' + newWebpUrl + '" type="image/webp">' +
'<source srcset="' + srcImage + '" type="image/jpeg">' +
imgTag +
'</picture>'
}
}
});
return line
}
return line
})
.join('\n')
file.contents = new Buffer.from(data)
this.push(file)
} catch (err) {
this.emit('error', new PluginError(pluginName, err))
}
cb()
})
}