编译semantic-ui时的Cannot call method 'match' of undefined异常

我在编译semantic-ui的时候,由于报了异常,而没能生成semantic.min.css,异常如下

Potentially unhandled rejection [2] TypeError: Cannot call method ‘match’ of undefined
at DestroyableTransform.module.exports.settings.plumber.less.errorHandler (/home/james/Favorite/Project/MyLab/su/semantic/tasks/config/tasks.js:92:29)
at DestroyableTransform.emit (events.js:117:20)
at afterTransform (/home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:74:26)
at TransformState.afterTransform (/home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:58:12)
at /home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/index.js:58:14
at tryCatchReject (/home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/node_modules/accord/node_modules/when/lib/makePromise.js:845:30)
at runContinuation1 (/home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/node_modules/accord/node_modules/when/lib/makePromise.js:804:4)
at Rejected.when (/home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/node_modules/accord/node_modules/when/lib/makePromise.js:625:4)
at Pending.run (/home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/node_modules/accord/node_modules/when/lib/makePromise.js:483:13)
at Scheduler._drain (/home/james/Favorite/Project/MyLab/su/node_modules/gulp-less/node_modules/accord/node_modules/when/lib/Scheduler.js:62:19)

这时由于nodejs与gulp-autoprefixer的版本不匹配造成的,其实如果你够细心的话,在安装semantic-ui的时候就能发现如下的提示:

npm WARN engine gulp-autoprefixer@3.1.0: wanted: {“node”:”>=0.12.0”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN engine postcss@5.0.21: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN engine less@2.7.1: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN optional dep failed, continuing fsevents@1.0.12
npm WARN engine postcss@5.0.21: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN engine is-buffer@1.1.3: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN engine is-buffer@1.1.3: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN engine is-buffer@1.1.3: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN engine is-buffer@1.1.3: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
npm WARN engine is-buffer@1.1.3: wanted: {“node”:”>=0.12”} (current: {“node”:”0.10.29”,”npm”:”1.4.21”})
gulp-autoprefixer 3.0.0 和 3.0.1 both 都依赖nodejs 12,

因此你可以升级nodejs,我选择重新安装gulp-autoprefixer的低版本来解决

rm -rf node_modules/gulp-autoprefixer
npm install gulp-autoprefixer@2.3.1

或者从github下载semantic-ui源码,修改pakage.json中的依赖

“gulp-autoprefixer”: “^3.1.0”

“gulp-autoprefixer”: “^2.3.1”
然后使用npm安装或更新

npm install

npm update
翟前锋 wechat
欢迎订阅我的微信公众号:zhaiqianfeng!