Собрал 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() { }
}