Задать вопрос
ainazkambar
@ainazkambar
Начинающий веб-разработчик

Почему GULP неправильно называет файлы/не распознает пути?

Собрал gulp и возникает проблема в моменте со шрифтами. Алгоритм как я понял такой:
1. из папки src/fonts ищет файлы .otf, преобразовывает в .ttf и сохраняет там же.
2. ищет файлы .ttf, преобразовывает в .woff и сохраняет их в dist/fonts

Проблема в том, что этот gulpенький почему-то сохраняет некоторые файлы вот так:
- .otf файл, преобразованный в .ttf сохраняет в саму папку src, а не в папку fonts + в название файла добавляет "fonts\"
- та же история с файлами .woff. Он сохраняет их в папку dist, вместо dist/fonts + в название файла пристраивает "fonts\"

Как это исправить?

Содержание файла fonts.js:

import fs, { appendFile } 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 = 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});\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() { }
}
  • Вопрос задан
  • 96 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
ainazkambar
@ainazkambar Автор вопроса
Начинающий веб-разработчик
Если кому надо, открываем node_modules/gulp-fonter/dist/index.js, находим строку:

newFont.path = source.dirname + '\\' + source.stem + '.' + type;

меняем '\\' на '/', и должно заработать.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы