Конвертация шрифтов через Gulp-fonter, не создается папка и не перекидываются файлы?

Question

[zFFF]

Просидел уже 4 дня, переписал куча раз и не как не могу понять почему не могу конвертировать форматы шрифтов, в gulp otf и tff выполняются без ошибок. Буду благодарен любой помощи. PS: код вставлял не весь, чтобы каши не было

Файл fonts.js

import fs from "fs";
import fonter from "gulp-fonter";
import ttf2woff2 from "gulp-ttf2woff2";

export const otfToTtf = () => {
  return app.gulp
    .src(`${app.path.srcFolder}/fonts/*.otf`, {})
    .pipe(
      app.plugins.plumber(
        app.plugins.notify.onError({
          title: "FONTS",
          message: "Error: <%= error.message %>",
        })
      )
    )
    .pipe(
      fonter({
        formats: ["ttf"],
      })
    )
    .pipe(app.gulp.dest(`${app.path.srcFolder}/fonts/`));
};

export const ttfToWoff = () => {
  return app.gulp
    .src(`${app.path.srcFolder}/fonts/*.ttf`)
    .pipe(
      app.plugins.plumber(
        app.plugins.notify.onError({
          title: "FONTS",
          message: "Error: <%= error.message%>",
        })
      )
    )
    .pipe(
      fonter({
        formats: ["woff"],
      })
    )
    .pipe(app.gulp.dest(`${app.path.build.fonts}`))
    .pipe(app.gulp.src(`${app.path.srcFolder}/fonts/*.ttf`))
    .pipe(ttf2woff2())
    .pipe(app.gulp.dest(`${app.path.build.fonts}`));
};

export const fontsStyle = () => {
  //Файл стилей подключения шрифтов
  let fontsFile = `${app.path.srcFolder}/scss/fonts.scss`;
  //Проверяем, существуют ли файлы шрифтов
  fs.readdir(app.path.build.fonts, function (err, fontsFiles) {
    if (fontsFiles) {
      //Проверяем, существует ли файл стилей для подключения шрифтов
      if (!fs.existsSync(fontsFile)) {
        //Если файла нет, создаём его
        fs.writeFile(fontsFile, "", cb);
        let newFileOnly;
        for (var i = 0; i < fontsFiles.length; i++) {
          //Записываем подключения шрифтов в файл стилей
          let fontFileName = fontsFiles[i].split(".")[0];
          if (newFileOnly !== fontFileName) {
            let fontName = fontFileName.split("-")[0]
              ? fontFileName.split("-")[0]
              : fontFileName;
            let fontWeight = fontFileName.split("-")[1]
              ? fontFileName.split("-")[1]
              : fontFileName;
            if (fontWeight.toLowerCase() === "thin") {
              fontWeight = 100;
            } else if (fontWeight.toLowerCase() === "extralight") {
              fontWeight = 200;
            } else if (fontWeight.toLowerCase() === "light") {
              fontWeight = 300;
            } else if (fontWeight.toLowerCase() === "medium") {
              fontWeight = 500;
            } else if (fontWeight.toLowerCase() === "semibold") {
              fontWeight = 600;
            } else if (fontWeight.toLowerCase() === "bold") {
              fontWeight = 700;
            } else if (
              fontWeight.toLowerCase() === "extrabold" ||
              fontWeight.toLowerCase() === "heavy"
            ) {
              fontWeight = 800;
            } else if (fontWeight.toLowerCase() === "black") {
              fontWeight = 900;
            } else {
              fontWeight = 400;
            }
            fs.appendFile(
              fontsFile,
              `@font-face{\n\tfont-family: ${fontName};\n\tfont-display: swap;\n\tsrc: url("../fonts/${fontFileName}.woff2") format("woff2"), url("../fonts/${fontFileName}.woff") format("woff");\n\tfont-weight: ${fontWeight};\n\tfont-style: normal;\n}\r\n`,
              cb
            );
            newFileOnly = fontFileName;
          }
        }
      } else {
        //Если файл есть, выводим сообщение
        console.log(
          "Файл scss/fonts.scss уже существует. Для обновления файла нужно его удалить!"
        );
      }
    }
  });
  return app.gulp.src(`${app.path.srcFolder}`);
  function cb() {}
};

Пути прописаны:

import * as nodePath from "path";
const rootFolder = nodePath.basename(nodePath.resolve());

const buildFolder = `./dist`;
const srcFolder = `./src`;

export const path = {
  build: {
    js: `${buildFolder}/js/`,
    css: `${buildFolder}/css/`,
    html: `${buildFolder}/`,
    images: `${buildFolder}/img/`,
    fonts: `${buildFolder}/fonts/`,
    files: `${buildFolder}/files/`,
  },
  src: {
    js: `${srcFolder}/js/app.js`,
    images: `${srcFolder}/img/**/*.{jpg,jpeg,png,gif,webp}`,
    svg: `${srcFolder}/img/**/*.svg`,
    scss: `${srcFolder}/scss/style.scss`,
    html: `${srcFolder}/*.html`,
    files: `${srcFolder}/files/**/*.*`,
  },

Файл gulpfile.js

import gulp from "gulp";
import { path } from "./gulp/config/path.js";
import { plugins } from "./gulp/config/plugins.js";

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

import { otfToTtf, ttfToWoff, fontsStyle } from "./gulp/task/fonts.js";

const fonts = gulp.series(otfToTtf, ttfToWoff, fontsStyle);

const mainTasks = gulp.series(
  fonts,
  gulp.parallel(copy, html, scss, js, images)
);

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

Comments

[Ankhena]

За 4 дня можно было все шрифты, которые вам встретятся в проектах за всю жизнь, прогнать ручками через онлайн конвертер.

[zFFF]

Ankhena, можно, но хочется сделать уже готовую сборку и разобраться почему не работает.
Воду тоже в ладошках можно переносить и ведром не пользоваться ;)

[Ankhena]

zFFF, ведро экономит время, а этот плагин уже явно проиграл.

[zFFF]

Ankhena, вдруг, это не в плагине проблема, а ошибка в другом месте допущена мною

[Ankhena]

zFFF, не, разобраться-то в любом случае полезно. Может кто-то заметит ошибку.

[zFFF]

Вроде как решил, не знаю костыль или нет :)
Добавил в путь src fonts и через путь считывал файлы шрифтов app.gulp.src(app.path.src.fonts)
так добавляется всё и конвертируется, надеюсь, кому-то будет полезно )

[Ihor07]

zFFF Можно подробнее какие изменения внесли в код? У меня так же не создается папка fonts в dir и не конвертируются шрифты из src. Исходный код такой же как в вопросе.

[denis991]

кто знает напишите тоже такая же проблема t.me/d9911!!!

[Nik_81]

zFFF, не можешь по подробней написать столкнулся с такой же проблемой не могу ее решить

Answer 1

[Danaika]

Столкнулась с аналогичной проблемой.
Если у вас Mac, то стоит установить npm i -D gulp-fonter-unx

gulp-fonter написан под винду

Comments

[IvanZhukov]

Дополню ответ. У меня и на винде тоже gulp-fonter не корректно работал, потому что я через docker это все запускал. Установил вместо него gulp-fonter-unx - все работает корректно

Answer 2

[Дмитрий Решетарчук]

https://github.com/dima23ua/my_gulp - пользуйся на здоровье