renren-fast-vue@1.2.2 項目編譯報錯: build `gulp`

問題呈現：

PS D:\Code\Java\ideaWorkspace\renren-fast-vue> npm run build

> renren-fast-vue@1.2.2 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! renren-fast-vue@1.2.2 build: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the renren-fast-vue@1.2.2 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  

 

轉載指明出處：https://www.cnblogs.com/dennyLee2025/p/13686140.html