Gulp fontsStyle mixins?

Gulp.js – это программный инструмент для автоматизации задач веб-разработки, написанный на языке JavaScript. Он используется для автоматического выполнения таких задач, как минификация и конкатенация файлов, компиляция препроцессоров CSS и многих других.

Mixins – это функции или методы, которые могут принимать аргументы и генерировать CSS-код. Они часто используются для создания повторяющихся стилей или для добавления дополнительной функциональности к CSS.

Gulp fontsStyle mixins относятся к задаче автоматизации генерации спрайтов шрифтов в Gulp.js с использованием примесей (mixins). Когда мы говорим о спрайтах шрифтов, мы обычно имеем в виду объединение нескольких шрифтов в один файл, который может быть загружен одним запросом на сервер. Это уменьшает количество запросов от клиента к серверу и, следовательно, ускоряет загрузку страницы.

Для работы с этой задачей в Gulp.js нам понадобятся несколько пакетов. Один из них – gulp-iconfont – который позволяет превратить набор SVG-файлов в спрайт шрифтов. Другой – gulp-consolidate – который позволяет нам использовать шаблоны для генерации CSS-кода из иконок.

Для начала установим необходимые пакеты следующей командой в консоли:

npm install gulp-iconfont gulp-consolidate --save-dev

Затем, добавим следующий код в наш Gulp-файл:

const gulp = require('gulp');
const iconfont = require('gulp-iconfont');
const consolidate = require('gulp-consolidate');

gulp.task('fonts', function() {
    return gulp.src('icons/*.svg')
        .pipe(iconfont({
            fontName: 'myfont',
            prependUnicode: true,
            formats: ['ttf', 'eot', 'woff'],
            timestamp: Math.round(Date.now()/1000)
        }))
        .on('glyphs', function (glyphs, options) {
            gulp.src('templates/myfont.css')
                .pipe(consolidate('lodash', {
                    glyphs: glyphs,
                    fontName: options.fontName,
                    fontPath: '../fonts/',
                    className: 'icon'
                }))
                .pipe(gulp.dest('dist/css/'));
        })
        .pipe(gulp.dest('dist/fonts/'));
});

gulp.task('default', ['fonts']);

Здесь мы создали задачу 'fonts', которая берет все SVG-файлы из папки 'icons', преобразует их в шрифт спрайт и сохраняет в папку 'dist/fonts/'. Затем, используя примеси из шаблона 'templates/myfont.css', генерируем CSS-код и сохраняем его в папку 'dist/css/'. Наконец, мы добавляем задачу по умолчанию 'default', которая выполняет только задачу 'fonts'.

Перед запуском этого Gulp-файла убедитесь, что у вас уже есть папка 'icons' со всеми SVG-файлами и папка 'templates' со шаблоном 'myfont.css'.

Теперь, запустив Gulp, он автоматически соберет все SVG-файлы в спрайт шрифтов и сгенерирует соответствующий CSS-код, который может быть подключен к вашему проекту.

Это был длинный ответ, но теперь вы знаете, как использовать Gulp.js и примеси для создания спрайтов шрифтов. Удачи!