После компиляции проекта, при помощи Gulp, не отображаются некоторые стили и все шрифты
третий день ломаю голову над проблемой - после компиляции проекта при помощи Gulp - не отображаются все шрифты (проблема в том, что они копируются в папку билда dist (woff и woff2 с приставкой fonts**.woff/woff2), чего не должно быть, поскольку они должны размещаться в dist/fonts, но так же woff2 копируется в необходимую папку fonts.
gulpfile.js:
import gulp from "gulp";
import { path } from "./gulp/config/path.js";
import { plugins } from "./gulp/config/plugins.js";
global.app = {
isBuild: process.argv.includes('--build'),
isDev: !process.argv.includes('--build'),
path: path,
gulp: gulp,
plugins: plugins
}
import { copy } from "./gulp/tasks/copy.js";
import { reset } from "./gulp/tasks/reset.js";
import { html } from "./gulp/tasks/html.js";
import { server } from "./gulp/tasks/server.js";
import { scss } from "./gulp/tasks/scss.js";
import { js } from "./gulp/tasks/js.js";
import { images } from "./gulp/tasks/images.js";
import { ttfToWoff, fontsStyle } from "./gulp/tasks/fonts.js";
// import { fonts } from "./gulp/tasks/fonts.js";
import { zip } from "./gulp/tasks/zip.js";
import { ftp } from "./gulp/tasks/ftp.js";
function watcher() {
gulp.watch(path.watch.files, copy)
gulp.watch(path.watch.html, html)
gulp.watch(path.watch.scss, scss)
gulp.watch(path.watch.js, js)
gulp.watch(path.watch.images, images)
}
const fonts = gulp.series(ttfToWoff, fontsStyle);
const mainTasks = gulp.series(fonts, gulp.parallel(copy, html, scss, js, images));
const dev = gulp.series(reset, mainTasks, gulp.parallel(watcher, server));
const build = gulp.series(reset, mainTasks);
const deployZIP = gulp.series(reset, mainTasks, zip);
const deployFTP = gulp.series(reset, mainTasks, ftp);
export {dev}
export {build}
export {deployZIP}
export {deployFTP}
gulp.task('default', dev);
path.js:
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,gif}`,
svg: `${srcFolder}/img/**/*.svg`,
scss: `${srcFolder}/scss/style.scss`,
html: `${srcFolder}/*.html`,
files: `${srcFolder}/files/**/*.*`
},
watch: {
js: `${srcFolder}/js/**/*.js`,
scss: `${srcFolder}/scss/**/*.scss`,
html: `${srcFolder}/**/*.html`,
images: `${srcFolder}/img/**/*.{jpg,jpeg,png,svg,gif,ico}`,
files: `${srcFolder}/files/**/*.*`
},
clean: buildFolder,
buildFolder: buildFolder,
srcFolder: srcFolder,
rootFolder: rootFolder,
ftp: 'test'
}
fonts.js:
import fs from "fs";
import fonter from "gulp-fonter";
import ttf2woff2 from "gulp-ttf2woff2";
export const ttfToWoff = () => {
return app.gulp.src(`${app.path.srcFolder}/fonts/*.{ttf, woff, woff2}`)
.pipe(
app.plugins.plumber(
app.plugins.notify.onError({
title: "FONTS",
message: "Error: <%= error.message%>",
})
)
)
.pipe(fonter({
formats: ['woff', 'ttf']
}))
.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 (let 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\t font-family: ${fontName};\n\t font-display: swap;\n\t src: url("../fonts/${fontFileName}.woff2") format("woff2"), url("../fonts/${fontFileName}.woff") format("woff");\n\t font-weight: ${fontWeight};\n\t font-style: normal; \n}\r\n`,
cb
);
newFileOnly = fontFileName;
}
}
} else {
console.log(
"Файл scss/fonts.scss уже существует. Для обновления файла нужно его удалить!"
);
}
}
});
return app.gulp.src(`${app.path.srcFolder}`);
function cb() {}
};
Итог компиляции:
Перепробовал множество вариантов, но результат практически один и тот же - шрифты не подключаются к проекту, некоторые стили (background-color) не отображаються.
Источник: Stack Overflow на русском