Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого ещё со школы интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь. Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.
ВАЖНО! В этой статье речь пойдёт о самой последней версии сборки. Если вы пользуетесь версиями сборки, вышедшими до публикации этой статьи, информация будет для вас не релевантна, но полезна.
https://github.com/budfy/Easy-webdev-startpack
Первое, что нам нужно сделать - это инициализировать проект. Открываем директорию проекта в командной строке (очень надеюсь, вы знаете, как это делается) и вводим команду 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');
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/ нам понадобятся следующие поддиректории:
Получиться в итоге должно приблизительно следующее:
project/
├──── build/
├────
Источник статьи: https://habr.com/ru/post/560894/
ВАЖНО! В этой статье речь пойдёт о самой последней версии сборки. Если вы пользуетесь версиями сборки, вышедшими до публикации этой статьи, информация будет для вас не релевантна, но полезна.
Какие задачи решает эта сборка?
- вёрстка компонентами (вам не нужно в каждую страницу копировать 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/ нам понадобятся следующие поддиректории:
Получиться в итоге должно приблизительно следующее:
project/
├──── build/
├────
Источник статьи: https://habr.com/ru/post/560894/