Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого ещё со школы интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь. Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.
ВАЖНО! В этой статье речь пойдёт о самой последней версии сборки. Если вы пользуетесь версиями сборки, вышедшими до публикации этой статьи, информация будет для вас не релевантна, но полезна.
Какие задачи решает эта сборка?
-
вёрстка компонентами (вам не нужно в каждую страницу копировать head, header, footer и другие повторяющиеся элементы, вплоть до кнопок или кастомных чекбоксов);
-
вёрстка с препроцессорами (SASS/SCSS);
-
конвертация шрифтов из ttf в eot, woff, woff2;
-
лёгкое (почти автоматическое) подключение шрифтов;
-
лёгкое (почти автоматическое) создание псевдоэлементов-иконок;
-
обработка изображений "на лету";
-
минификация html/css/js файлов;
-
возможность вёрстки с использованием php;
-
выгрузка файлов на хостинг по FTP;
-
несколько мелких задач с помощью миксинов.
Собственно создание сборки
Начнём собирать нашу сборку (простите за тавтологию). Предварительно нам потребуется уже установленная на компьютере LTS-версия Node.js и NPM (входит в пакет Node.js) либо Yarn. Для нашей задачи не имеет значения, какой из этих пакетных менеджеров использовать, однако я буду объяснять на примере NPM, соответственно, для Yarn вам потребуется нагуглить аналоги NPM-команд.
Первое, что нам нужно сделать - это инициализировать проект.
Открываем директорию проекта в командной строке (очень надеюсь, вы
знаете, как это делается) и вводим команду npm
init.
После этого npm задаст нам неесколько стандартных вопросов по типу названия проекта, автора, версии и т.д... Отвечаем на них как душе угодно. Для нашей задачи это не имеет никакого значения.
Далее будет намного удобнее работать через Visual Studio Code (поскольку у него есть встроенный терминал) или любой другой удобный вам редактор + терминал.
Прежде всего, нам нужно установить сам Gulp. Делается это двумя
командами npm i gulp -global - устанавливаем Gulp
глобально на систему и npm i gulp --save-dev -
устанавливаем Gulp локально в проект. Ключ --save
здесь отвечает за сохранение версии плагина при дальнейшей
установке (без него вам может установить более новую, несовместимую
с другими плагинами версию), а ключ -dev указывает на
то, что этот пакет необходим только во время разработки проекта, а
не во время его выполнения. Например, если мы устанавливаем в
проект пакет Swiper, который содержит скрипты слайдера и будет
отображаться на странице, мы будем устанавливать его без ключа
-dev, поскольку он нужен для выполнения, а не для
разработки.
После того, как Gulp установился, имеет смысл создать в корне проекта управляющий файл gulpfile.js, в котором мы и будем писать задачи для сборщика.
После этого нам нужно подключить Gulp в нашем файле, для того чтобы он исполнялся. Это делается с помощью require:
const gulp = require('gulp');
Далее, для каждой задачи будем использовать модули в отдельных
файлах. Для того, чтобы не подключать каждый модуль отдельно, нужно
установить и подключить плагин require-dir. Устанавливается
он всё той же командой (как и все последующие плагины, поэтому
далее повторяться не буду, просто знайте, что установить - это
npm i $PLUGIN-NAME$ --save-dev). После установки
подключаем его и прописываем путь к директории, в которую будем
складывать модули (у меня это директория tasks):
const gulp = require('gulp');const requireDir = require('require-dir');const tasks = requireDir('./tasks');
Первая задача
Давайте проверим, всё ли мы правильно сделали. Создадим в директории tasks файл модуля с именем hello.js. В созданном файле напишем простейшую функцию, которая будет выводить в консоль строку "Hello Gulp!" (можете придумать что-то менее банальное, если хотите).
module.exports = function hello () {console.log("Hello Gulp!");}
Теперь вернёмся в gulpfile.js и зададим там задачу hello:
const gulp = require('gulp');const requireDir = require('require-dir');const tasks = requireDir('./tasks');exports.hello = tasks.hello;
Теперь командой gulp hello в терминале запустим
нашу задачу. Если всё сделано правильно - в терминал должно
вывестись приблизительно такое сообщение:
[13:17:15] Using gulpfile D:\Web projects\Easy-webdev-startpack-new\gulpfile.js[13:17:15] Starting 'hello'...Hello Gulp![13:17:15] The following tasks did not complete: hello[13:17:15] Did you forget to signal async completion?
Так же, можно получить список всех заданных
задач командой gulp --tasks.
Файловая структура
Теперь, когда мы создали первую функцию, можно подумать о том, какая структура будет у наших проектов. Я предпочитаю использовать директорию (папку) /src для хранения исходных файлов и директорию /build для готовых файлов проекта.
В директории src/ нам понадобятся следующие поддиректории:-
components/ - директория для компонентов
-
components/bem-blocks/ - директория для БЭМ-блоков
-
components/page-blocks/ - директория для типовых блоков страницы, таких как хедер, футер и т.п.
-
fonts/ - директория для шрифтов
-
img/ - директория для изображений
-
js/ - директория для файлов JavaScript
-
scss/ - директория для файлов стилей
-
scss/base/ - директория для базовых стилей, которые мы изменять не будем
-
svg/ - директория для файлов SVG
-
svg/css/ - директория для SVG-файлов, которые будут интегрироваться в CSS
Получиться в итоге должно приблизительно следующее:
project/ build/
