javascriptimagefontsgulp

File breakage when copying with gulp.dest


In image.mjs and copy.mjs files I use gulp.dest But it breaks the files when copying, that is copying is done in the correct path, but the files end up becoming large in size and no longer workable

In the case of images it doesn't happen with .svg files, but it does with .png files

I use woff and woff2 format fonts

I use this versions of packeges:

"browser-sync": "^3.0.2",
"del": "^7.1.0",
"gulp": "^5.0.0",
"gulp-autoprefixer": "^9.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-cli": "^3.0.0",
"gulp-prettier": "^6.0.0",
"gulp-pug": "^5.0.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.1.4",
"gulp-sass": "^5.1.0",
"path": "^0.12.7",
"pug": "^3.0.2",
"sass": "^1.72.0"

This my gulpfile.mjs:

import gulp from "gulp";

import path from "./gulp/config/path.mjs";
import plugins from "./gulp/config/plugins.mjs";

global.app = {
  path: path,
  gulp: gulp,
  plugins: plugins,
};

import copy from "./gulp/tasks/copy.mjs";
import reset from "./gulp/tasks/reset.mjs";
import pug from "./gulp/tasks/pug.mjs";
import server from "./gulp/tasks/server.mjs";
import scss from "./gulp/tasks/scss.mjs";
import image from "./gulp/tasks/image.mjs";
import js from "./gulp/tasks/js.mjs";
import format from "./gulp/tasks/format.mjs";

gulp.task("format", format);

function watcher() {
  gulp.watch(path.watch.fonts, copy);
  gulp.watch(path.watch.pug, pug);
  gulp.watch(path.watch.scss, scss);
  gulp.watch(path.watch.img, image);
  gulp.watch(path.watch.js, js);
}

const mainTasks = gulp.parallel(copy, pug, scss, image, js);

const dev = gulp.series(reset, mainTasks, gulp.parallel(watcher, server));

gulp.task("default", dev);

This my image.mjs file:

const image = () => {
  return app.gulp
    .src(app.path.src.img)
    .pipe(app.gulp.dest(app.path.build.img))
    .pipe(app.plugins.browsersync.stream());
};

export default image;

And this my copy.mjs file:

const copy = () => {
  return app.gulp
    .src(app.path.src.fonts)
    .pipe(app.gulp.dest(app.path.build.fonts));
};

export default copy;

I tried using the gulp-copy plugin instead of gulp.dest, but it didn't work for some reason

I found a similar problem, but the solution from there didn't work for me


Solution

  • I was having the same issue when trying to compress some images or trying to move a fonts folder. After changing Gulp version to 4.0.2, everything worked as expected.

    Edit: Found solution in issue, in gulp version 5 "encoding" must be set to "false" when working with binary files:

    gulp.src(path, {encoding: false})