PRO Сборщики: Что это и зачем?
Введение в курс дела
Когда только начинаешь заниматься веб-версткой, создание веб-страниц может показаться достаточно простым и весьма увлекательным делом. Однако, с нарастанием навыков, как правило, наступает момент, когда без использования специальных инструментов становится довольно сложно создавать реально классные сайты, повышая свой навык сайтоделанья. Например, постоянное сжатие картинок, конвертация шрифтов, использование префиксов в описании классов - все эти процессы могут утомить даже опытного верстальщика. Именно здесь на помощь приходят сборщики проектов. Они автоматизируют процессы работы с исходным кодом веб-приложения, позволяя сократить размер и оптимизировать работу сайта. В этой статье мы рассмотрим основные виды сборщиков - Webpack, Gulp, Parcel и Vite, а также разберёмся, как они могут упростить жизнь начинающего верстальщика.
Так всё же, сборщик проекта - что это за зверь такой?
Вообще, сборщик проекта — это инструмент, который помогает автоматизировать процесс создания веб-сайтов. Он позволяет упростить работу с исходным кодом, облегчить его поддержку и сократить размер итогового проекта. Также они называются генераторами статического контента.
Он проходит по всему проекту, выполняет необходимые действия, например, оптимизирует изображения, компилирует и сжимает файлы JavaScript и CSS, после чего объединяет их в один или несколько файлов. Итог работы затем может быть загружен на сервер, как обычный сайт или же сразу ставиться в роли темы в WordPress.
К ним также можно подключать различные плагины и модули, которые могут помочь в оптимизации и автоматизации работы. В том числе, появляется возможность использовать препроцессоры, например, Sass или Less, шаблонизаторы такие, как Nunjucks или Pug, а также другие инструменты, которые помогут Вам делать свой продукт качественным.
Одна из главных причин использования подобного рода софта — это экономия времени и упрощение процесса разработки. Без использования сборщиков, верстальщику приходилось бы вручную выполнять множество операций, которые можно было бы автоматизировать, что Вы 100% прочувствовали на себе.
Parcel
Первый сборщик, который мы рассмотрим, будет Parcel — самый простой из всех существующих сборщиков проектов, так как не нуждается в конфигурации. Благодаря такому описанию, можно подумать, что из-за этого я начну Вам рассказывать, что это лучший выбор новичка, но нет! С него начинать своё знакомство со сборщиками просто бессмысленно, как раз таки из-за его плюса/минуса (тут, как посмотреть), просто потому что Вы ничему не научитесь, нового узнать не сможете, и подойдёт он исключительно для тех, кому нужен проект «уже вчера», либо же для тех, кому нужно проверить быстренько гипотезу и ему не хочется качать для этого тяжёлую готовую сборку, либо же настраивать её вручную.
Ссылка на главную страницу Parcel -> https://parceljs.org/
Установка
yarn add parcel
# Для установки cli
npm i -g parcel-cli
# Для установки в проект
npm i parcel
pnpm add parcel
Использование
Запуск dev режима:
# Конкретный файл
parcel src/index.html
# Несколько файлов
parcel src/a.html src/b.html
# Все файлы по конкретному признаку (кавычки обязательы, кста)
parcel 'src/*.html'
# Конкретная директория
parcel packages/frontend
# Конкретная директория, но через рег. выражение
parcel 'packages/*'
# Текущая директория
parcel
Запуск build режима:
# Всё тоже самое, что и dev, только используется аргумент build
parcel build src/index.html
Gulp
Раз, Parcel не нуждается в настройке в принципе, то тогда выбор падёт на самый простой настраиваемый сборщик проекта в виде Gulp. И это удачный выбор для новичка, ведь он действительно поможет прожить полную настройку проекта от «А» до «Я», однако главный его недостаток в том, что он крайне медленный, лично у меня уходит около 1-2 минут, чтобы собрать/запустить проект, а это слишком много.
Возможно, у меня не самая оптимизированная сборка, но мне было нормально, пока я не узнал про одного из следующих наших обозреваемых.
Сам же использую чутка изменённый конфиг Макса (MaxGraph), и думаю, что он не будет против того, чтобы я разместил здесь ссылки на наши сборки.
Gulp by MaxGraph -> https://github.com/maxdenaro/gulp-maxgraph
WynWebKit -> https://github.com/Wyndace/WynWebKit/tree/WynWebKit-gulp
А так же вот ссылочка на сайт Gulp -> https://gulpjs.com/
Установка
yarn add gulp
# Для установки в проект
npm i -D gulp
# Для установки CLI
npm i -g gulp-cli
pnpm add gulp
Использование
Всё зависит от ваших команд внутри gulpfile.js
, но стандартная задача запускается так:
gulp
WebPack
Следующим генератором статики будет некий WebPack – один из самых мощных генераторов статики. Он предлагает широкий спектр настроек и инструментов для управления зависимостями, оптимизации и управления ресурсами.
Webpack имеет несколько преимуществ перед другими сборщиками, например, он быстрее, чем Gulp, и его конфигурация более гибкая и масштабируемая. Однако, именно по этой причине, для новичков Webpack может показаться крайне, сложным в использовании.
Ссылка на сайт -> https://webpack.js.org/
Установка
yarn add webpack
# Для установки в проект
npm i -D webpack
# Для установки CLI
npm i -g webpack-cli
pnpm add webpack
Использование
Запуск dev режима:
webpack serve --open --mode development
Запуск build режима:
webpack --mode production
Vite
Относительно свежий и новый сборщик проектов, который позабирал всё самое лучшее от каждого из перечисленных и улучшил. Vite — с французского переводится, как скорость, а читается как /vit/
.
Но в чём выражается данная «скорость»? Всё просто: скорость сборки проектов крайне высока, если сравнивать с Gulp и Webpack, однако упор именно идёт на скорость подготовки проекта к началу разработки. Vite не требует предварительной сборки перед запуском. Вместо этого, он обрабатывает модули в реальном времени в браузере при помощи встроенного сервера разработки.
Сам Vite, как я понял, является неким fork’ом Rollup, так как использует их синтаксис плагинов и конфигов. Благодаря чему, настройка сборщика сводится к минимуму, и весь процесс запуска и работы с проектом становится намного более удобным и быстрым. Более того, Vite имеет HMR из коробки, что позволяет изменять код в реальном времени и немедленно видеть изменения без перезагрузки страницы.
Ссылка на сайт -> https://vitejs.dev/
Установка
Vite не устанавливается как npm пакет, разработчики решили, предоставлять сразу готовые сборки, чтобы как можно скорей перейти к разработке.
Если передать в аргумент --template
следующие значения vanilla
, vanilla-ts
, vue
, vue-ts
, react
, react-ts
, react-swc
, react-swc-ts
, preact
, preact-ts
, lit
, lit-ts
, svelte
, svelte-ts
, то можно будет загрузить другой шаблон проекта с используемые технологиями, которые были в названии.
P.S.: vanila
- обычный html/css + js проект, ts
- TypeScript.
yarn create vite
npm create vite@latest
pnpm create vite
Использование
Так как Vite предоставляет сразу готовые шаблоны, то разработчики позаботились о том, чтобы вне зависмости от выбранной технологии, можно было запускать сборку/разработку проекта очень просто. Они добавили в package.json добавили пункт scripts, где описали нужные команды для запуска режимов. Например:
{
"scripts": {
"dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
"build": "vite build", // build for production
"preview": "vite preview" // locally preview production build
}
}
И для запуска, например, dev режима нужно прописать для npm:
npm run dev
И так с остальными режимами.
Так что в итоге?
А в итоге, Вы вольны выбрать тот инструмент, который Вам понравился больше всех и который подойдёт Вашей больше всех. Ну, а чтобы это было сделать проще, я составил следующую табличку с плюсами, минусами и описанием.
Сборщик | Краткое описание | Преимущества | Недостатки |
---|---|---|---|
Gulp | Простой и гибкий сборщик | - Легко настраивается и расширяется - Поддерживает множество плагинов - Понятный синтаксис конфигурации | - Не всегда эффективен при работе с большим количеством файлов - Низкая скорость сборки проекта |
Webpack | Сложный и полностью настраиваемый сборщик | - Мощный механизм обработки модулей - Широкая функциональность, позволяющая настроить сборку под любые нужды | - Высокая сложность настройки - Низкая скорость работы при использовании множества плагинов |
Parcel | Простой и быстрый сборщик, не требующий конфигурации | - Быстрый запуск и сборка проекта - Поддержка множества типов файлов - Простой и понятный синтаксис конфигурации | - Ограниченный выбор плагинов - Ограниченные возможности по настройке |
Vite | Сборщик, оптимизированный для разработки на клиенте | - Быстрая сборка проекта - Минимизированное время пересборки при изменении кода - Использует новые возможности браузера, такие как ESM-модули | - Меньшее кол-во плагинов, так как слишком новая разработка |
Если Вам хочется отдельной статьи по каждому сборщику, али же просто нашли какую-то неточность, ошибку, а может просто хотите пообщаться об этой теме, то жду Вас всех в нашем сообществе :)
Всем пока и удачи в ваших начинаниях!