[Разработка веб-сайтов, CSS, JavaScript, HTML, Node.JS] Как я сделал свою сборку Gulp для быстрой, лёгкой и приятной вёрстки
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Серьёзно и профессионально я начал заниматься вёрсткой в 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/
├────
===========
Источник:
habr.com
===========
Похожие новости:
- [Python] Автоматизация тестирования на Python: Шесть способов тестировать эффективно (перевод)
- [Разработка веб-сайтов, JavaScript, Программирование, Совершенный код] Погружение во внедрение зависимостей (DI), или как взломать Матрицу
- [Программирование, Julia, Искусственный интеллект, Data Engineering] Новая система автоматически очищает массивы ненадёжных данных (перевод)
- [Веб-дизайн, Разработка веб-сайтов, Платежные системы, JavaScript, Дизайн мобильных приложений] Создаём королевскую форму для приёма банковских карт
- [Разработка веб-сайтов, JavaScript, Клиентская оптимизация, HTML, VueJS] Проблемы рендера 7-и тысяч элементов на Vuetify
- [Разработка веб-сайтов, CSS, HTML, История IT, Научно-популярное] 25 лет CSS (перевод)
- [JavaScript, Программирование] Доступные текстовые метки для всех (перевод)
- [Разработка веб-сайтов, JavaScript, Программирование, TypeScript] Как мы потерпели неудачу, а затем преуспели в переходе на TypeScript (перевод)
- [LaTeX, Читальный зал, Научно-популярное] Mathcha — внебрачный сын Word и Latex
- [Java, Тестирование веб-сервисов] Как найти все битые ссылки на странице с помощью Selenium (перевод)
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_javascript, #_html, #_node.js, #_html, #_css, #_java, #_gulp, #_sborka (сборка), #_avtomatizatsija (автоматизация), #_scss, #_verstka (вёрстка), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_css, #_javascript, #_html, #_node.js
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 09:16
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого ещё со школы интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь. Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.ВАЖНО! В этой статье речь пойдёт о самой последней версии сборки. Если вы пользуетесь версиями сборки, вышедшими до публикации этой статьи, информация будет для вас не релевантна, но полезна.Какие задачи решает эта сборка?
const gulp = require('gulp');
const gulp = require('gulp');
const requireDir = require('require-dir'); const tasks = requireDir('./tasks'); module.exports = function hello () {
console.log("Hello Gulp!"); } const gulp = require('gulp');
const requireDir = require('require-dir'); const tasks = requireDir('./tasks'); exports.hello = tasks.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?
project/
├──── build/ ├──── =========== Источник: habr.com =========== Похожие новости:
Разработка веб-сайтов ), #_css, #_javascript, #_html, #_node.js |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 09:16
Часовой пояс: UTC + 5