【webpack】记webpack、gulp打包与jenkins部署遇到的几个问题

目录

 jenkins构建日志报错找不到对应node版本的依赖

jenkins构建日志报错 拉取node-sass失败

构建项目 导致运行报错 'xxxxxx of undefined' 

gulp编译失败

---

 jenkins构建日志报错找不到对应node版本的依赖

原因：

1. 构建环境升级了node环境，但是缓存了依赖，此时项目构建找不到新版本node的依赖

解决办法：

1. 清除该项目的工作空间，即可重新拉取

jenkins构建日志报错 拉取node-sass失败

原因：

1. 项目的package-lock.json 锁定了版本号以及地址，从npm拉取失败，导致无法从淘宝镜像拉取相应的依赖

解决方法：

1. 删除线上的package-lock.json 再打包 会重新生成新的package-lock.json

构建项目 导致运行报错 'xxxxxx of undefined' 

例如：‘regiesterModule of undefined’  此方法是vuex的方法regiesterModule找不到，查看vuexGitHub版本更新日志可知 发现vuex分别在@2.5.0 和 @3.1.1版本 对registerModule进行了调整跟修复

原因可能如下：

1. 构建环境的node版本过老
2. 某个依赖版本过低/该模块被修复或者有更新（注意查看GitHub版本更新日志）

解决方法：

1. 升级node版本，升级npm依赖版本,清除构建环境的工作空间

gulp编译失败

• 报错日志一： ReferenceError: primordials is not defined

ReferenceError: primordials is not defined

原因：

1. node版本过高，gulp@3.x及以下的版本在node@11.x 和@12.x情况下不兼容

解决办法：

1. node版本降级
2. gulp版本升级到4.x

• 报错日志二: Task function must be specified

原因：

1. gulp由低版本升级到gulp@4.x版本，对应的函数语法也有所改变。具体使用可以看官网文档，例如最常用到的创建任务函数gulp.task()
2. task函数里面的链式调用需要加上return返回响应的对象来进行接下来的回调操作

// gulp3.x,task支持三个参数

gulp.task('sass', ['sass-name'], function() {
    ...
})

//在升级到gulp4.x后, task()只支持两个参数了,
  如果要使用三个参数，可以使用新的gulp.series和gulp.parallel函数
gulp.task('sass', gulp.series('sass-name', function() {
    ...
}));

// 多个参数/任务
gulp.task('sass',  gulp.series(gulp.parallel('scripts', 'styles'), function() {    
    ...
}));

 
// 在gulp这里，返回的是gulp.src这个对象.接下来的回调能继续调用gulp.src去完成其他事情
function dev(gulp, files, config, dest, name) {    
    return gulp.src(files)        
        .pipe(webpack(config))        
            .pipe(replace(/#proj_name#\ml\/(.*?)\.html/g, name+"/$1"))        
                .pipe(replace(/#proj_name#/g, name))        
                    .pipe(gulp.dest(dest))
}

Gulp 提供了两个强大的组合方法：  series() 和  parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。 series() 和  parallel() 可以互相嵌套至任意深度  -- gulp中文文档

• 报错日志三：Did you forget to signal async completion?

原因：

1. 升级到gulp@4.x版本后，调用函数都要返回一个回调函数在task完成时通知Gulp

// 解决方法
gulp.task('test', done => {
  console.log('HelloWorld!');
  done();
});