Всем добра!
Друзья, подскажите пожалуйста пошагово, как в проект подключить fontawecome?
Чего в идеале хочу добиться:
Что бы корректно выводились все иконки fontawecome на стадии разработки ну конечно же при выгрузке в конечного результата.
Что имею сейчас:
содержимое 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 { otfToTtf, ttfToWoff, fontsStyle } from "./gulp/tasks/fonts.js";
import { svgSpriteTask } from "./gulp/tasks/svg-sprive.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.series(html, ftp)
gulp.watch(path.watch.scss, scss);
gulp.watch(path.watch.js, js);
gulp.watch(path.watch.images, images);
}
// Последовательная обработака шрифтов
const fonts = gulp.series(otfToTtf, ttfToWoff, fontsStyle);
// Основные задачи
const mainTasks = gulp.series(fonts, gulp.parallel(copy, html, scss, js, images, svgSpriteTask));
// Построение сценариев выполнения задач
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 { svgSpriteTask }
export { dev }
export { build }
export { deployZIP }
export { deployFTP }
// Выполнение сценария по умолчанию
gulp.task('default', dev);
Содержимое tasks/fonts.js:
import fs from 'fs';
import fonter from 'gulp-fonter-fix';
import ttf2woff2 from 'gulp-ttf2woff2';
export const otfToTtf = () => {
// Ищем файлы шрифтов .otf
return app.gulp.src(`${app.path.srcFolder}/fonts/*.otf`, {})
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "FONTS",
message: "Error: <%= error.message %>"
}))
)
// Конвертируем в .ttf
.pipe(fonter({
formats: ['ttf']
}))
// Выгружаем в исходную папку
.pipe(app.gulp.dest(`${app.path.srcFolder}/fonts/`))
}
export const ttfToWoff = () => {
// Ищем файлы шрифтов .ttf
return app.gulp.src(`${app.path.srcFolder}/fonts/*.ttf`, {})
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "FONTS",
message: "Error: <%= error.message %>"
}))
)
// Конвертируем в .woff
.pipe(fonter({
formats: ['woff']
}))
// Выгружаем в папку с результатом
.pipe(app.gulp.dest(`${app.path.build.fonts}`))
// Ищем файлы шрифтов .ttf
.pipe(app.gulp.src(`${app.path.srcFolder}/fonts/*.ttf`))
// Конвертируем в .woff2
.pipe(ttf2woff2())
// Выгружаем в папку с результатом
.pipe(app.gulp.dest(`${app.path.build.fonts}`))
// Ищем файлы шрифтов .woff и woff2
.pipe(app.gulp.src(`${app.path.srcFolder}/fonts/*.{woff,woff2}`))
// Выгружаем в папку с результатом
.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() { }
}
Содержимое tasks/scss.js:
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import rename from 'gulp-rename';
import cleanCss from 'gulp-clean-css'; // Сжатие CSS файла
import webpcss from 'gulp-webpcss'; // Вывод WEBP изображений
import autoprefixer from 'gulp-autoprefixer'; // Добавление вендорных префиксов
import groupCssMediaQueries from 'gulp-group-css-media-queries'; // Групировка медиа запросов
const sass = gulpSass(dartSass);
export const scss = () => {
return app.gulp.src(app.path.src.scss, { sourcemaps: app.isDev })
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "SCSS",
message: "Error: <%= error.message %>"
})))
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(app.plugins.replace(/@img\//g, '../img/'))
.pipe(
app.plugins.if(
app.isBuild,
groupCssMediaQueries()
)
)
.pipe(
app.plugins.if(
app.isBuild,
autoprefixer({
grid: true,
overrideBrowserslist: ["last 3 versions"],
cascade: true
})
)
)
.pipe(
app.plugins.if(
app.isBuild,
webpcss(
{
webpClass: ".webp",
noWebpClass: ".no-webp"
}
)
)
)
// Раскомментировать если нужен не сжатый дубль файла стилей
.pipe(app.gulp.dest(app.path.build.css))
.pipe(
app.plugins.if(
app.isBuild,
cleanCss()
)
)
.pipe(rename({
extname: ".min.css"
}))
.pipe(app.gulp.dest(app.path.build.css))
.pipe(app.plugins.browsersync.stream());
}
Содержимое config/patch.js
// Получаем имя папки проекта
import * as nodePath from 'path';
const rootFolder = nodePath.basename(nodePath.resolve());
const buildFolder = `./dist`; // Также можно использовать rootFolder
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`, //.pug
files: `${srcFolder}/files/**/*.*`,
svgicons: `${srcFolder}/svgicons/*.svg`,
},
watch: {
js: `${srcFolder}/js/**/*.js`,
scss: `${srcFolder}/scss/**/*.scss`,
html: `${srcFolder}/**/*.html`, //.pug
images: `${srcFolder}/img/**/*.{jpg,jpeg,png,svg,gif,ico,webp}`,
files: `${srcFolder}/files/**/*.*`
},
clean: buildFolder,
buildFolder: buildFolder,
srcFolder: srcFolder,
rootFolder: rootFolder,
ftp: ``
}
Совсем не могу понять, как прикрутить скаченный fontawecome.
Спасибо.
Средний
Простой
