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, то можно будет загрузить другой шаблон проекта с используемые технологиями, которые были в названии.

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

И так с остальными режимами.

Так что в итоге?

А в итоге, Вы вольны выбрать тот инструмент, который Вам понравился больше всех и который подойдёт Вашей больше всех. Ну, а чтобы это было сделать проще, я составил следующую табличку с плюсами, минусами и описанием.

Если Вам хочется отдельной статьи по каждому сборщику, али же просто нашли какую-то неточность, ошибку, а может просто хотите пообщаться об этой теме, то жду Вас всех в нашем сообществе :)

Всем пока и удачи в ваших начинаниях!