記webpack、gulp打包與jenkins部署遇到的幾個問題

 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();
});複製代碼