Я использую merge2 для потоковой передачи нескольких задач по оптимизации изображений.Я использую merge2, gulp-imagemin, imagemin-pngquant, imagemin-mozjpeg, gulp-image-resize, gulp-webp.
Когда я выполняю задачу, она отлично работает в соответствии с моим требованием, но я получаю ошибку TypeError: - TypeError: Cannot read property '_readableState' of undefined at pauseStreams в терминале.Мой код в gulpfile выглядит следующим образом:
gulp.task('mergeimg',function(){
var bannerImages = [2000,1600,1200,800,533];
var imgmin = bannerImages.forEach(function(size){
return gulp.src( '../html/assets/unoptimized/banners/**/*.{png,jpg,jpeg}')
.pipe(imageResize({
width: size,
crop:true,
}))
.pipe(imagemin({
progressive: true,
use: [pngquant()],
use:[imageminMozjpeg({quality:85})],
}))
.pipe(rename(function(path){
path.basename += '_'+size
}))
.pipe(debug())
.pipe(gulp.dest('../html/assets/temp/' ))
});
var imgretina = bannerretina.forEach(function(size){
return gulp.src( '../html/assets/unoptimized/banners/**/*.{png,jpg,jpeg}')
.pipe(imageResize({
width: size * 2,
crop:true,
}))
.pipe(imagemin({
progressive: true,
use: [pngquant()],
use:[imageminMozjpeg({quality:85})],
}))
.pipe(rename(function(path){
path.basename += '_'+size+'@2x'
}))
.pipe(debug())
.pipe(gulp.dest('../html/assets/temp/' ))
});
var webPimg = bannerImages.forEach(function(size){
return gulp.src( '../html/assets/unoptimized/banners/**/*.{png,jpg,jpeg}')
.pipe(webp())
.pipe(rename(function(path){
path.basename += '_'+size
}))
.pipe(debug())
.pipe(gulp.dest('../html/assets/temp/' ))
});
var mergedStream = merge( imgmin, imgretina, webPimg );
return mergedStream;
});
и мой код ошибки выглядит следующим образом:
[13:26:00] Starting 'mergeimg'...
[13:26:00] 'mergeimg' errored after 28 ms
[13:26:00] TypeError: Cannot read property '_readableState' of undefined
at pauseStreams (E:\xamp\htdocs\damithemes\capture-kids\gulp_automation\node
_modules\merge2\index.js:98:18)
at addStream (E:\xamp\htdocs\damithemes\capture-kids\gulp_automation\node_mo
dules\merge2\index.js:31:25)
at merge2 (E:\xamp\htdocs\damithemes\capture-kids\gulp_automation\node_modul
es\merge2\index.js:90:30)
at Gulp.<anonymous> (E:\xamp\htdocs\damithemes\capture-kids\gulp_automation\
gulpfile.js:183:24)
at module.exports (E:\xamp\htdocs\damithemes\capture-kids\gulp_automation\no
de_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (E:\xamp\htdocs\damithemes\capture-kids\gulp_a
utomation\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (E:\xamp\htdocs\damithemes\capture-kids\gulp_a
utomation\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (E:\xamp\htdocs\damithemes\capture-kids\gulp_auto
mation\node_modules\orchestrator\index.js:134:8)
at C:\Users\Da mirecle\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129
:20
at _combinedTickCallback (internal/process/next_tick.js:131:7)
[13:26:01] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_533.we
bp
[13:26:01] gulp-debug: 1 item
[13:26:01] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_2000.w
ebp
[13:26:01] gulp-debug: 1 item
[13:26:01] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_1200.w
ebp
[13:26:01] gulp-debug: 1 item
[13:26:01] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_800.we
bp
[13:26:01] gulp-debug: 1 item
[13:26:01] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_1600.w
ebp
[13:26:01] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_800.jp
g
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 2%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_1200.j
pg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.4%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_533@2x
.jpg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.6%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_533.jp
g
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 3.1%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_1600.j
pg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.1%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_2000@2
x.jpg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.1%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_800@2x
.jpg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.1%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_1200@2
x.jpg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.1%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_2000.j
pg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.1%)
[13:26:02] gulp-debug: 1 item
[13:26:02] gulp-debug: ..\html\assets\unoptimized\banners\child-with-bags_1600@2
x.jpg
[13:26:02] gulp-imagemin: Minified 1 image (saved 858 B - 1.1%)
[13:26:02] gulp-debug: 1 item
Из кода видно, что все изображения сжимаются и преобразуются вФормат webp, как я хотел, но я действительно заперт, почему код ошибки приходит.Что я думаю, мой цикл forEach не правильный.Надеюсь, что это не так.Я не могу понять, что именно идет не так.Может кто-нибудь, пожалуйста, помогите мне разобраться.Заранее спасибо.
Я мог бы использовать gulp-responseive для этого, но, поскольку у меня 32-битная Windows, зависимость sharp не работает.В этом случае мне нужно придерживаться процесса gulp-image-resize.