How to solve the Gulp error: imagemin.jpegtran is not a function
How to solve the Gulp error: imagemin.jpegtran is not a function
每当我尝试使 imagemin 用于任何类型的图像时,我都会收到此错误:
21:54:49] 开始 'imgmin'...
[21:54:49] 'imgmin' 47 毫秒后出错
[21:54:49] 类型错误:imagemin.jpegtran 不是函数
at imgmin (D:\Dropbox\Side Projects\JS learning\dev-gulp\gulpfile.js:92:26)
at bound (domain.js:419:14)
at runBound (domain.js:432:12)
at asyncRunner (D:\Dropbox\Side Projects\JS learning\dev-gulp\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:75:11)
我目前正在使用:
- 节点版本 12.13.1
- npm 版本 6.12.1
- gullp cli 版本:2.2.0
- gulp本地版本:4.0.2
这是我的 gulpfile.js:
let mainDir = 'gulp project test';
let gulp = require('gulp'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
cleansCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
changed = require('gulp-changed'),
uglyfi = require('gulp-uglify'),
lineec = require('gulp-line-ending-corrector');
//set directories variables
let root = `../${mainDir}/`,
scss = root + 'sass',
js = root + 'src/js',
cssDist = root + 'dist/css'
jsDist = root + 'dist/js',
imgSRC = root + 'src/images/*',
imgDest = root + 'dist/images/*';
//set watch files
let phpWatcher = root + '**/*php', //glob pattern
styleWatcher = scss + '**/*.scss';
//set the order I want Gulp to concat JS files
let jsSRC = [
js + 'file1.js',
js + 'file2.js',
js + 'file3.js',
js + 'file4.js',
js + 'file5.js',
js + 'file6.js',
];
//set the order I want Gulp to concat CSS files
let cssSRC = [
root + 'src/css/file1.css',
root + 'src/css/file2.css',
root + 'src/css/file3.css',
root + 'src/css/file4.css',
cssDist + 'style.css'
];
function css() {
return gulp.src(scss + 'style.scss')
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(sass({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write())
.pipe(lineec())
.pipe(gulp.dest(cssDist))
}
function concatCSS() {
return gulp.src(cssSRC)
.pipe(sourcemaps.init({
loadMaps: true,
largefile: true
}))
.pipe(concat('style.min.css'))
.pipe(cleansCSS())
.pipe(sourcemaps.write('./maps/'))
.pipe(lineec())
.pipe(gulp.dest(cssDist));
}
function javascript() {
return gulp.src(jsSRC)
.pipe(concat('project.js'))
.pipe(uglyfi())
.pipe(lineec)
.pipe(gulp.dest(jsDist));
}
function imgmin() {
return gulp.src(imgSRC)
.pipe(changed(imgDest))
.pipe(imagemin([
imagemin.gifsicle({
interlaced: true
}),
imagemin.jpegtran({
progressive: true
}),
imagemin.optipng({
optimizationLevel: 5
})
]))
.pipe(gulp.dest(imgDest));
}
function watch() {
browserSync.init({
open: 'external',
proxy: 'http://localhost/dev',
port: 8080,
});
gulp.watch(styleWatcher, gulp.series([css, concatCSS]));
gulp.watch(jsSRC, javascript);
gulp.watch(imgSRC, imgmin);
gulp.watch([phpWatcher, jsDist + 'project.js', cssDist + 'style.min.css'])
}
exports.css = css;
exports.concatCSS = concatCSS;
exports.javascript = javascript;
exports.imgmin = imgmin;
exports.watch = watch;
let build = gulp.parallel(watch);
gulp.task('default', build);
我发现有人对 gifsicle 有同样的错误,并通过重新安装插件修复了它,但它对我不起作用。
我找到了答案并写在这里以防有人遇到同样的问题。
imagemin.jpegtran 已被 imagemin.mozjpeg 替代。此外,我必须安装 mozjpeg (npm install --save-dev imagemin-mozjpeg),因为在我撰写本文时,它似乎没有与 imagemin 一起安装。
我遇到了同样的问题,但它发生在 docker 的 alpine 版本的节点 (node:16.11.1-alpine3.14) 中。
问题是缺少一些 OS 库,通过添加库解决了这个问题(bash、autoconf、libtool、libltdl、libpng-dev、 lcms2-dev, GCC, g++, automaker):
RUN apk add --update \
bash \
autoconf \
libtool \
libltdl \
libpng-dev \
lcms2-dev \
gcc \
g++ \
automake \
make \
nasm \
&& rm -rf /var/cache/apk/*
每当我尝试使 imagemin 用于任何类型的图像时,我都会收到此错误:
21:54:49] 开始 'imgmin'...
[21:54:49] 'imgmin' 47 毫秒后出错
[21:54:49] 类型错误:imagemin.jpegtran 不是函数
at imgmin (D:\Dropbox\Side Projects\JS learning\dev-gulp\gulpfile.js:92:26)
at bound (domain.js:419:14)
at runBound (domain.js:432:12)
at asyncRunner (D:\Dropbox\Side Projects\JS learning\dev-gulp\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:75:11)
我目前正在使用:
- 节点版本 12.13.1
- npm 版本 6.12.1
- gullp cli 版本:2.2.0
- gulp本地版本:4.0.2
这是我的 gulpfile.js:
let mainDir = 'gulp project test';
let gulp = require('gulp'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
cleansCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
changed = require('gulp-changed'),
uglyfi = require('gulp-uglify'),
lineec = require('gulp-line-ending-corrector');
//set directories variables
let root = `../${mainDir}/`,
scss = root + 'sass',
js = root + 'src/js',
cssDist = root + 'dist/css'
jsDist = root + 'dist/js',
imgSRC = root + 'src/images/*',
imgDest = root + 'dist/images/*';
//set watch files
let phpWatcher = root + '**/*php', //glob pattern
styleWatcher = scss + '**/*.scss';
//set the order I want Gulp to concat JS files
let jsSRC = [
js + 'file1.js',
js + 'file2.js',
js + 'file3.js',
js + 'file4.js',
js + 'file5.js',
js + 'file6.js',
];
//set the order I want Gulp to concat CSS files
let cssSRC = [
root + 'src/css/file1.css',
root + 'src/css/file2.css',
root + 'src/css/file3.css',
root + 'src/css/file4.css',
cssDist + 'style.css'
];
function css() {
return gulp.src(scss + 'style.scss')
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(sass({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write())
.pipe(lineec())
.pipe(gulp.dest(cssDist))
}
function concatCSS() {
return gulp.src(cssSRC)
.pipe(sourcemaps.init({
loadMaps: true,
largefile: true
}))
.pipe(concat('style.min.css'))
.pipe(cleansCSS())
.pipe(sourcemaps.write('./maps/'))
.pipe(lineec())
.pipe(gulp.dest(cssDist));
}
function javascript() {
return gulp.src(jsSRC)
.pipe(concat('project.js'))
.pipe(uglyfi())
.pipe(lineec)
.pipe(gulp.dest(jsDist));
}
function imgmin() {
return gulp.src(imgSRC)
.pipe(changed(imgDest))
.pipe(imagemin([
imagemin.gifsicle({
interlaced: true
}),
imagemin.jpegtran({
progressive: true
}),
imagemin.optipng({
optimizationLevel: 5
})
]))
.pipe(gulp.dest(imgDest));
}
function watch() {
browserSync.init({
open: 'external',
proxy: 'http://localhost/dev',
port: 8080,
});
gulp.watch(styleWatcher, gulp.series([css, concatCSS]));
gulp.watch(jsSRC, javascript);
gulp.watch(imgSRC, imgmin);
gulp.watch([phpWatcher, jsDist + 'project.js', cssDist + 'style.min.css'])
}
exports.css = css;
exports.concatCSS = concatCSS;
exports.javascript = javascript;
exports.imgmin = imgmin;
exports.watch = watch;
let build = gulp.parallel(watch);
gulp.task('default', build);
我发现有人对 gifsicle 有同样的错误,并通过重新安装插件修复了它,但它对我不起作用。
我找到了答案并写在这里以防有人遇到同样的问题。 imagemin.jpegtran 已被 imagemin.mozjpeg 替代。此外,我必须安装 mozjpeg (npm install --save-dev imagemin-mozjpeg),因为在我撰写本文时,它似乎没有与 imagemin 一起安装。
我遇到了同样的问题,但它发生在 docker 的 alpine 版本的节点 (node:16.11.1-alpine3.14) 中。
问题是缺少一些 OS 库,通过添加库解决了这个问题(bash、autoconf、libtool、libltdl、libpng-dev、 lcms2-dev, GCC, g++, automaker):
RUN apk add --update \
bash \
autoconf \
libtool \
libltdl \
libpng-dev \
lcms2-dev \
gcc \
g++ \
automake \
make \
nasm \
&& rm -rf /var/cache/apk/*