Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого ещё со школы интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь. Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.
ВАЖНО! В этой статье речь пойдёт о самой последней версии сборки. Если вы пользуетесь версиями сборки, вышедшими до публикации этой статьи, информация будет для вас не релевантна, но полезна.
Какие задачи решает эта сборка?
вёрстка компонентами (вам не нужно в каждую страницу копировать head, header, footer и другие повторяющиеся элементы, вплоть до кнопок или кастомных чекбоксов);
вёрстка с препроцессорами (SASS/SCSS);
конвертация шрифтов из ttf в eot, woff, woff2;
лёгкое (почти автоматическое) подключение шрифтов;
лёгкое (почти автоматическое) создание псевдоэлементов-иконок;
обработка изображений "на лету";
минификация html/css/js файлов;
возможность вёрстки с использованием php;
выгрузка файлов на хостинг по FTP;
несколько мелких задач с помощью миксинов.
Для тех, кому лень читать и делать всё руками - сразу ссылка на сборку.
https://github.com/budfy/Easy-webdev-startpack
Собственно создание сборки
Начнём собирать нашу сборку (простите за тавтологию). Предварительно нам потребуется уже установленная на компьютере 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/
├────