gulp 错误集锦

为了打包构建之前的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 "
  ],
  "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

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

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

6. gulp-htmlmin

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

你可能感兴趣的:(gulp,node.js,前端)