使用gulp css时遭遇多轮报错的技术求助

1. Node.js 8.17.0 下的 SyntaxError: Unexpected reserved word #

原因 #

Node.js 8.x版本不支持for await...of这类ES2018+的异步迭代语法，你安装的stylelint依赖的cosmiconfig新版本使用了该语法，导致兼容问题。而且Node.js 8早已停止维护，完全适配不了现代前端工具链的依赖。

解决方法 #

你升级到Node.js 16.9.1的方向是对的，这个问题在Node版本升级后会自动解决，无需额外操作。

2. Node.js 16.9.1 下的 EACCES: permission denied 权限错误 #

原因 #

当前执行gulp的用户没有权限删除/home/bitrix/www/brio-3/local/templates/brio/assets/dist/css/critical/about-critical.css文件，大概率是该文件/目录的所有者为其他用户（比如bitrix系统用户）。

解决方法 #

• 先查看文件所有者：

  ls -l /home/bitrix/www/brio-3/local/templates/brio/assets/dist/css/critical/about-critical.css
  

• 方法一：修改dist目录的所有者为当前用户，确保后续操作有权限：

  sudo chown -R $USER:$USER /home/bitrix/www/brio-3/local/templates/brio/assets/dist
  

• 方法二：手动删除报错文件后重新执行任务：

  sudo rm /home/bitrix/www/brio-3/local/templates/brio/assets/dist/css/critical/about-critical.css
  gulp css
  

• 注意：尽量不要用sudo gulp css执行任务，否则生成的新文件会属于root用户，后续还会触发权限问题。

3. PostCSS版本兼容错误（postcss-assets requires PostCSS 8） #

原因 #

你直接执行npm i postcss只是在项目根目录安装了PostCSS 8，但gulp-postcss依赖的是自身node_modules目录里的旧版本PostCSS，并未使用根目录的新版本，导致版本不匹配。

解决方法 #

1. 先卸载所有相关依赖，清除旧版本：

   npm uninstall gulp-postcss postcss postcss-assets
   

2. 重新安装适配PostCSS 8的版本组合：

   npm install gulp-postcss postcss postcss-assets --save-dev
   

3. 如果仍有冲突，清理缓存和锁文件后重新安装：

   rm -rf node_modules package-lock.json
   npm cache clean --force
   npm install
   

4. 检查package.json，确保gulp-postcss版本在9.x及以上（9.x+支持PostCSS 8），postcss-assets版本在6.x及以上（6.x+支持PostCSS 8）。

内容的提问来源于stack exchange，提问作者Alexander_milk_pineapple