Gulp Imagemin plugin - EROFS: read-olny file system, mkdir '/dist' - gulp

Question

I'm using Gulp (CLI: 2.3.0; Local: 4.0.2) for my workflow. I have added to gulpfile imagemin function for images reduction, but when I want to run my task it throws error:
-> 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
Interesting is, that other gulp tasks can create /dist folder and can write into it, imagemin function can not. I have already tried everything, what I found on stackoverflow, but none of these things work for me.
Anyone have some solution to this?
OS: Mac OS Big Sur 11.4
npm: 7.20.2
Node: 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"
}
gulpfile:
'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
);

Answer 1

After hour I have found the problem.
In my imagemin function I had:
.pipe(dest('/dist/images'));
And solution is, that I have removed / before dist/images, so with this it works:
.pipe(dest('dist/images'));