【问题标题】:How to solve the Gulp error: imagemin.jpegtran is not a function如何解决 Gulp 错误:imagemin.jpegtran 不是函数
【发布时间】:2022-04-27 06:11:14
【问题描述】:

每当我尝试让 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 有同样的错误,并通过重新安装插件来修复它,但它对我不起作用。

【问题讨论】:

    标签: javascript gulp gulp-imagemin


    【解决方案1】:

    我找到了答案,我把它写在这里,以防有人遇到同样的问题。 imagemin.jpegtran 已被 imagemin.mozjpeg 替代。另外,我必须安装 mozjpeg (npm install --save-dev imagemin-mozjpeg),因为在我写作的时候,它似乎没有与 imagemin 一起安装。

    【讨论】:

      【解决方案2】:

      我遇到了同样的问题,但它发生在 docker 的高山版本节点(节点:16.11.1-alpine3.14)中。

      问题是缺少一些操作系统库,通过添加库(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/*
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2022-07-28
        • 1970-01-01
        • 2018-07-08
        • 1970-01-01
        • 2016-11-10
        • 1970-01-01
        • 2019-11-02
        相关资源
        最近更新 更多