[email protected] 專案編譯報錯: build `gulp`
阿新 • • 發佈:2020-09-17
問題呈現:
PS D:\Code\Java\ideaWorkspace\renren-fast-vue> npm run build > [email protected] build D:\Code\Java\ideaWorkspace\renren-fast-vue > gulp fs.js:36 } = primordials; ^ ReferenceError: primordials is not defined at fs.js:36:5 at req_ (D:\Code\Java\ideaWorkspace\renren-fast-vue\node_modules\natives\index.js:143:24) at Object.req [as require] (D:\Code\Java\ideaWorkspace\renren-fast-vue\node_modules\natives\index.js:55:10) at Object.<anonymous> (D:\Code\Java\ideaWorkspace\renren-fast-vue\node_modules\graceful-fs\fs.js:1:37) at Module._compile (internal/modules/cjs/loader.js:1137:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Module.require (internal/modules/cjs/loader.js:1025:19) npm ERR! errno 1 npm ERR! [email protected] build: `gulp` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
解決辦法:
1.升級gulp到4.0
npm install -g gulp-cli
npm install --save-dev gulp@4
檢視gulp 版本:
gulp -v
2.修改gulpfile.js檔案
該檔案在renren-fast-vue 專案的根目錄
修改的原因時:gulp 4.0的語法更以往版本不同。
修改前的gulpfile.js
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var path = require('path'); var del = require('del'); var distPath = path.resolve('./dist'); var version = ''; // 版本號 var versionPath = ''; // 版本號路徑 var env = ''; // 執行環境 // 建立版本號(年月日時分) (function () { var d = new Date(); var yy = d.getFullYear().toString().slice(2); var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1); var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate(); var h = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours(); var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes(); version = yy + MM + DD + h + mm; versionPath = distPath + '/' + version; })(); // 編譯 gulp.task('build', $.shell.task([ 'node build/build.js' ])); // 建立版本號目錄 gulp.task('create:versionCatalog', ['build'], function () { return gulp.src(`${distPath}/static/**/*`) .pipe(gulp.dest(`${versionPath}/static/`)) }); // 替換${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl佔位變數 gulp.task('replace:cdnUrl', ['create:versionCatalog'], function () { return gulp.src(`${versionPath}/static/js/manifest.js`) .pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"')) .pipe(gulp.dest(`${versionPath}/static/js/`)) }); // 替換${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置變數 gulp.task('replace:version', ['create:versionCatalog'], function () { return gulp.src(`${versionPath}/static/config/index-${env}.js`) .pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`)) .pipe(gulp.dest(`${versionPath}/static/config/`)) }); // 合併${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js gulp.task('concat:config', ['replace:version'], function () { return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`]) .pipe($.concat('index.js')) .pipe(gulp.dest(`${distPath}/config/`)) }); // 清空 gulp.task('clean', function () { return del([versionPath]) }); gulp.task('default', ['clean'], function () { // 獲取環境配置 env = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod' // 開始打包編譯 gulp.start(['build', 'create:versionCatalog', 'replace:cdnUrl', 'replace:version', 'concat:config'], function () { // 清除, 編譯 / 處理專案中產生的檔案 del([`${distPath}/static`, `${versionPath}/static/config`]) }) });
修改後的gulpfile.js
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var path = require('path'); var del = require('del'); var distPath = path.resolve('./dist'); var version = ''; // 版本號 var versionPath = ''; // 版本號路徑 var env = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod'; // 執行環境 // 建立版本號(年月日時分) (function () { var d = new Date(); var yy = d.getFullYear(); var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1); var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate(); var h = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours(); var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes(); version = yy + MM + DD + h + mm; versionPath = distPath + '/' + version; })(); // 編譯 gulp.task('build', $.shell.task([ 'node build/build.js' ])); // 建立版本號目錄 gulp.task('create:versionCatalog', function () { return gulp.src(`${distPath}/static/**/*`) .pipe(gulp.dest(`${versionPath}/static/`)) }); // 替換${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl佔位變數 gulp.task('replace:cdnUrl', function () { return gulp.src(`${versionPath}/static/js/manifest.js`) .pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"')) .pipe(gulp.dest(`${versionPath}/static/js/`)) }); // 替換${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置變數 gulp.task('replace:version', function () { return gulp.src(`${versionPath}/static/config/index-${env}.js`) .pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`)) .pipe(gulp.dest(`${versionPath}/static/config/`)) }); // 合併${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js gulp.task('concat:config', function () { return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`]) .pipe($.concat('index.js')) .pipe(gulp.dest(`${distPath}/config/`)) }); //清除, 編譯 / 處理專案中產生的檔案 gulp.task('cleanBuild', function () { return del([`${distPath}/static`, `${versionPath}/static/config`]) }); // 清空 gulp.task('clean', function () { return del([versionPath]) }); //gulp.series|4.0 依賴 //gulp.parallel|4.0 多個依賴巢狀 gulp.task('default',gulp.series(gulp.series('build','create:versionCatalog','replace:cdnUrl','replace:version','concat:config','cleanBuild')));
3.最後編譯打包
1. npm run build 2. npm install -g serve 3. serve dist
到目前為止 編譯打包成功!
win10遇到的一些問題
如果gulp -v顯示報錯
刪除檔案gulp.ps1檔案:C:\Users\D\AppData\Roaming\npm\gulp.ps1
或用管理員身份開啟:Windows Powershell ;
然後輸入:
set-ExecutionPolicy RemoteSigned
策略選擇:選擇Y 或者A