gulp 错误集锦

简析

已于 2023-09-19 11:57:31 修改

阅读量617

点赞数

文章标签： gulp node.js 前端

于 2023-09-19 11:56:02 首次发布

本文链接：https://blog.csdn.net/yulongxue/article/details/133018269

版权

文章讲述了在使用gulp打包layui项目时遇到的错误，包括primordials未定义、ES6语法兼容性问题（如let、arrowfunctions）、gulp-uglify压缩错误等，以及相应的解决方法，如锁定依赖版本和转换语法为ES5。

摘要由CSDN通过智能技术生成

为了打包构建之前的layui写的项目，用到了gulp，但是遇到的坑还挺多，记录一下。

1、运行gulp时报错

ReferenceError: primordials is not defined

解决办法：

ReferenceError: primordials is not defined 意思是primordials这个没被定义，是因为项目中gulp版本和node版本不兼容，先看下本地的版本：

方法1，降级node和升级gulp，不建议。

方法2，使用npm shrinkwrap锁定依赖版本。

1、项目根目录新建npm-shrinkwrap.json，删掉node_modules
2、npm-shrinkwrap.json内容修改如下：

{
  "dependencies": {
    "graceful-fs": {
        "version": "4.2.2"
     }
  }
}

然后重新执行npm install，这时候再去执行gulp相关操作就不会报错了。
注意：这个文件在执行过一次npm install以后，里边内容就变了，下次再想重新执行，要再复制一遍。

注意package.json 中"gulp-babel": "^8.0.0", 这个版本不报错，7.0报错。

{
  "name": "OnePic",
  "version": "3.0.0",
  "description": "",
  "license": "LPPL",
  "author": [
    "xianxin <xianxin@layui-inc.com>"
  ],
  "homepage": "http://www.layui.com/admin/",
  "devDependencies": {
    "@babel/core": "^7.22.20",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.22.15",
    "@babel/preset-env": "^7.22.20",
    "@babel/runtime": "^7.22.15",
    "babel-loader": "^8.3.0",
    "chai": "^4.1.1",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.0 ",
    "gulp-header": "^1.8.8",
    "gulp-if": "^2.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.6.1",
    "gulp-uglify": "^1.5.4",
    "minimist": "^1.2.0",
    "mocha": "^3.2.0",
    "sinon": "^3.2.1",
    "sinon-chai": "^2.13.0"
  }
}

参考链接:

gulp项目中ReferenceError: primordials is not defined报错解决方法_萧&萧的博客-CSDN博客

2、gulp-uglify压缩js文件时报错之 punc(()

报错内容： SyntaxError: Unexpected token: punc (()
问题分析： 这种大多是js代码中包含ES6语法的函数声明方式，或者函数声明写的有问题。报错提供的行号不一定准确，只能自己找到使用ES6语法的位置，改成ES5。或者把语法错的地方改好。
解决方法： 把ES6代码替换成ES5代码；把错误的函数声明改对。

(今天遇到的7千行代码报一个不准确的错误，最后把文件拆分成了好几个逐个排查，总算定位了错误。函数声明没写对，多了个逗号，/(ㄒoㄒ)/~~）

3. gulp-uglify压缩js文件时报错之 Unexpected token name

报错内容： _Unexpected token name «p», expected punc «
问题分析： 问题原因同上，也是ES6语法引起的。不过这个是声明变量let的原因。
解决方法： 把let改成var。

4. gulp-uglify压缩js文件时报错之 Unexpected token name

5、gulp-uglify不识别箭头函数，要改成普通的函数

6. gulp-htmlmin

报错内容： throw er; // Unhandled 'error' event ^ Error: Parse Error: <= 95% </spa<div
问题分析： 遇到html压缩时的解析错误，此处是因为小于号<引起的。
解决方法： 小于号<改用编码方式<。
参考链接：gulp 错误集锦 - 简书