vue中gulp打包出错

Question

问题描述

vue gulp打包出错

问题出现的环境背景及自己尝试过哪些方法

已经重新安装node-modules还是不行.
找不到问题所在

相关代码

"scripts": {
    "dev": "node ./build/dev-server.js",
    "gulp": "gulp --gulpfile build/optimization.js",
    "build": "node ./build/build.js",
    "status": "node build/status.js",
    "switch": "node build/switch.js",
    "prod": "cross-env NODE_ENV=production npm run build && npm run gulp",
    "test": "node ./build/prod-server.js"
  },

    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-copy": "^1.0.1",
    "gulp-imagemin": "^3.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-replace": "^0.6.1",
    "gulp-rev-collector": "^1.2.4",
    "gulp-uglify": "^3.0.0",

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var replace = require('gulp-replace');
var config = require('./config');


var assetsPublicPath = config.build.assetsPublicPath == "./" ? "/" : config.build.assetsPublicPath;

// 编译less
gulp.task('imagemin', function() {
    gulp.src('../dist/images/**/*').pipe(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest('../dist' + assetsPublicPath + 'images'))
});
gulp.task('minifycss', function() {
    gulp.src('../dist' + assetsPublicPath + 'style/**/*.css').pipe(minifycss())
        .pipe(gulp.dest('../dist' + assetsPublicPath + 'style'))
});
gulp.task('replace', function() {
    gulp.src('../dist' + assetsPublicPath + 'style/**/*.css')
        .pipe(replace(config.build.assetsPublicPath + 'style/iconfont', './iconfont'))
        .pipe(replace(config.build.assetsPublicPath + 'images/', '../images/'))
        .pipe(minifycss())
        .pipe(gulp.dest('../dist' + assetsPublicPath + 'style'));
});

gulp.task('uglify', function() {
    gulp.src('../src/js/lib/xpolyfill.js').pipe(uglify())
        .pipe(gulp.dest('../dist' + assetsPublicPath + 'js/lib'));
    gulp.src('../src/js/lib/jweixin.js').pipe(uglify())
        .pipe(gulp.dest('../dist' + assetsPublicPath + 'js/lib'));
    gulp.src('../src/js/lib/alipayjsapi.js').pipe(uglify())
        .pipe(gulp.dest('../dist' + assetsPublicPath + 'js/lib'));
    gulp.src('../src/js/lib/commercial.js').pipe(uglify())
        .pipe(gulp.dest('../dist' + assetsPublicPath + 'js/lib'));
});
if (config.build.assetsPublicPath == "./") {
    gulp.task('default', ['imagemin', 'replace', 'uglify']);
} else {
    gulp.task('default', ['imagemin', 'minifycss', 'uglify'], function(res) {
        console.log("default");
        console.log(res)
    });
}

你期待的结果是什么？实际看到的错误信息又是什么？

E:protectianjinCommerce>npm run gulp

> [email protected] gulp E:protectianjinCommerce
> gulp --gulpfile build/optimization.js

[09:22:20] Working directory changed to E:protectianjinCommerceuild
[09:22:20] Using gulpfile E:protectianjinCommerceuildoptimization.js
[09:22:20] Starting 'imagemin'...
[09:22:20] Finished 'imagemin' after 10 ms
[09:22:20] Starting 'minifycss'...
[09:22:20] Finished 'minifycss' after 1.5 ms
[09:22:20] Starting 'uglify'...
[09:22:20] Finished 'uglify' after 2.72 ms
[09:22:20] Starting 'default'...
default
[Function: cb]

events.js:167
      throw er; // Unhandled 'error' event
      ^
Error: ????????????·????

    at notFoundError (E:protectianjinCommerce
ode_modulescross-spawnliben
oent.js:11:11)
    at verifyENOENT (E:protectianjinCommerce
ode_modulescross-spawnlibeno
ent.js:46:16)
    at ChildProcess.cp.emit (E:protectianjinCommerce
ode_modulescross-spawn
libenoent.js:33:19)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
Emitted 'error' event at:
    at DestroyableTransform.onerror (E:protectianjinCommerce
ode_modulesvin
yl-fs
ode_modules
eadable-streamlib\_stream_readable.js:558:12)
    at DestroyableTransform.emit (events.js:182:13)
    at Immediate.<anonymous> (E:protectianjinCommerce
ode_moduleshrough2-c
oncurrenthrough2-concurrent.js:37:14)
    at runCallback (timers.js:706:11)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gulp: `gulp --gulpfile build/optimization.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gulp script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersseawayAppDataRoaming
pm-cache\_logs2020-07-17T01_22_22
_580Z-debug.log

Answer 1

更换cnpm重新安装gulp-imagemin

gulp.task('imagemin', function () {
    gulp.src('../dist/images/**/*').pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
        .pipe(gulp.dest('../dist'+assetsPublicPath+'images')) 
});

目前找到的问题是,因为这个报错的,把这个去掉就好了.
写法也没问题 不知道是不是版本号的问题

希望各路大神帮忙解决~

7/20更新

这图片压缩呢 其实也可以不用压缩 项目还是能跑的
但是我可不想遗留bug,今天花了一下午时间还是被我翻翻找找,知道问题所在了

尝试解决问题的方法

按照网上说的环境变量配置,结果失败

升级版本gulp-imagemin 提示

[gulp-imagemin: Couldn't load default plugin xxx]

百度了一下,我大概知道怎么回事了,就是无法加载默认插件XXX
也就是说npm安装gulp-imagemin会丢失默认插件

更换yarn重新安装node-modules,结果还是失败
最后更换cnpm重新安装[email protected],结果成功
我的这个项目的gulp-imagemin版本号一直都是3.2.0
所以如果你使用的话,也要使用适合自己项目的版本号

这个原因我猜测大概就是这个gulp-imagemin的npm包损坏了
还是受到网络波动影响总是下载有毛病
要不就是我的网络环境有问题
可能里面的默认插件被某些东西限制了

总结一下:
问题就是很简单的问题,花了我不少时间...
所以,一点一点顺藤摸瓜,找到问题的位置,排查解决就可以了

加油~