如何解决Gulp Imagemin 插件 - EROFS: read-olny 文件系统,mkdir '/dist'
我的工作流程使用 Gulp(CLI:2.3.0;本地:4.0.2)。我已经添加到 gulpfile imagemin 函数来减少图像,但是当我想运行我的任务时它会抛出错误:
-> gulp
[10:56:11] Using gulpfile ~/dev/adm-servis-landing-page/gulpfile.js
[10:56:11] Starting 'default'...
[10:56:11] Starting 'compileSCSS'...
[10:56:11] Finished 'compileSCSS' after 396 ms
[10:56:11] Starting 'minifyJS'...
[10:56:11] Finished 'minifyJS' after 51 ms
[10:56:11] Starting 'imageOptimze'...
[10:56:12] 'imageOptimze' errored after 603 ms
[10:56:12] Error: EROFS: read-only file system,mkdir '/dist'
[10:56:12] 'default' errored after 1.07 s
有趣的是,其他 gulp 任务可以创建 /dist 文件夹并可以写入其中,而 imagemin 函数则不能。我已经尝试了所有我在 stackoverflow 上找到的方法,但这些方法都不适合我。
有人对此有什么解决办法吗?
操作系统:Mac OS Big Sur 11.4
npm:7.20.2
节点:14.7.1
package.json:
"devDependencies": {
"browser-sync": "^2.27.5","gulp": "^4.0.2","gulp-autoprefixer": "^8.0.0","gulp-clean-css": "^4.3.0","gulp-imagemin": "^7.1.0","gulp-sass": "^5.0.0","gulp-terser": "^2.0.1","gulp-webp": "^4.0.1","sass": "^1.36.0"
}
吞咽文件:
'use strict';
const { src,series,dest,watch } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass'));
const prefix = require('gulp-autoprefixer');
const minify = require('gulp-clean-css');
const terser = require('gulp-terser');
const imagemin = require('gulp-imagemin');
const imagewebp = require('gulp-webp');
const browserSync = require('browser-sync');
function compileSCSS() {
return src('src/scss/main.scss')
.pipe(sass())
.pipe(prefix())
.pipe(minify())
.pipe(dest('dist/css'));
}
function minifyJS() {
return src('src/js/*.js').pipe(terser()).pipe(dest('dist/js'));
}
function imageOptimze() {
return src('src/img/*.{jpg,png}')
.pipe(
imagemin([
imagemin.mozjpeg({ quality: 80,progressive: true }),imagemin.optipng({ optimizationLevel: 2 }),])
)
.pipe(dest('/dist/images'));
}
function webpImage() {
return src('dist/images/*.{jpg,png}')
.pipe(imagewebp())
.pipe(dest('/dist/images'));
}
function browsersyncServe(cb) {
browsersync.init({
server: {
baseDir: '.',},});
cb();
}
function browsersyncReload(cb) {
browsersync.reload();
cb();
}
function watchTask() {
watch('*.html',browsersyncReload);
watch(
['src/scss/**/*.scss','src/js/**/*.js'],series(compileSCSS,minifyJS,browsersyncReload)
);
watch('src/img/*.{jpg,png}',series(imageOptimze,browsersyncReload));
watch('dist/images/*.{jpg,series(webpImage,browsersyncReload));
}
// function taskWatch() {
// watch('/src/*.html',browsersyncReload);
// }
exports.default = series(
compileSCSS,imageOptimze,webpImage,browsersyncServe,watchTask
);
解决方法
一小时后我发现了问题。
在我的 imagemin 函数中:
.pipe(dest('/dist/images'));
解决方案是,我在 dist/images 之前删除了 /
,因此它可以工作:
.pipe(dest('dist/images'));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。