Gulp Gulp 图像插件- EROFS:只读文件系统,mkdir '/dist'

nwsw7zdq  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(137)

我正在使用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操作系统Big Sur 11.4
国家/地区:7.20.2
节点:14.7.1
软件包.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,png}', series(webpImage, browsersyncReload));
}

// function taskWatch() {
//   watch('/src/*.html', browsersyncReload);
// }
exports.default = series(
  compileSCSS,
  minifyJS,
  imageOptimze,
  webpImage,
  browsersyncServe,
  watchTask
);
8nuwlpux

8nuwlpux1#

过了一个小时我才发现问题。
在imagemin函数中,我有:

.pipe(dest('/dist/images'));

解决方案是,我已经删除了dist/images之前的/,所以它可以工作:

.pipe(dest('dist/images'));

相关问题