Gulp使用gulp-imagemin插件报错EROFS: 只读文件系统无法创建/dist目录

问题原因 #

你遇到的报错是路径书写错误导致的：

• imageOptimze、webpImage两个函数中，dest()传入的是绝对路径/dist/images，路径开头的斜杠代表从操作系统根目录开始寻址，而MacOS默认对根目录开启只读权限，普通用户无法直接在根目录创建dist文件夹，因此抛出EROFS: read-only file system错误。
• 其他任务可以正常执行的原因是你使用了相对路径dist/css、dist/js，是从当前项目根目录开始寻址，拥有写入权限。

修复方案 #

1. 移除两个图片处理函数中dest路径开头的斜杠，改为相对路径
2. 修正glob匹配规则中逗号后的多余空格，否则会无法匹配正常的jpg、png后缀文件

修改后的代码如下：

function imageOptimze() {
  // 去掉{jpg, png}中的空格，修正匹配规则
  return src('src/img/*.{jpg,png}')
    .pipe(
      imagemin([
        imagemin.mozjpeg({ quality: 80, progressive: true }),
        imagemin.optipng({ optimizationLevel: 2 }),
      ])
    )
    // 去掉路径开头的斜杠，使用相对路径
    .pipe(dest('dist/images'));
}

function webpImage() {
  // 去掉{jpg, png}中的空格，修正匹配规则
  return src('dist/images/*.{jpg,png}')
    .pipe(imagewebp())
    // 去掉路径开头的斜杠，使用相对路径
    .pipe(dest('dist/images'));
}

修改完成后重新运行gulp命令即可正常执行图片压缩任务。

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