## Введение в курс дела Когда только начинаешь заниматься веб-версткой, создание веб-страниц может показаться достаточно простым и весьма увлекательным делом. Однако, с нарастанием навыков, как правило, наступает момент, когда без использования специальных инструментов становится довольно сложно создавать реально классные сайты, повышая свой навык сайтоделанья. Например, постоянное сжатие картинок, конвертация шрифтов, использование префиксов в описании классов - все эти процессы могут утомить даже опытного верстальщика. Именно здесь на помощь приходят сборщики проектов. Они автоматизируют процессы работы с исходным кодом веб-приложения, позволяя сократить размер и оптимизировать работу сайта. В этой статье мы рассмотрим основные виды сборщиков - Webpack, Gulp, Parcel и Vite, а также разберёмся, как они могут упростить жизнь начинающего верстальщика. ## Так всё же, сборщик проекта - что это за зверь такой? Вообще, сборщик проекта — это инструмент, который помогает автоматизировать процесс создания веб-сайтов. Он позволяет упростить работу с исходным кодом, облегчить его поддержку и сократить размер итогового проекта. Также они называются генераторами статического контента. Он проходит по всему проекту, выполняет необходимые действия, например, оптимизирует изображения, компилирует и сжимает файлы JavaScript и CSS, после чего объединяет их в один или несколько файлов. Итог работы затем может быть загружен на сервер, как обычный сайт или же сразу ставиться в роли темы в WordPress. К ним также можно подключать различные плагины и модули, которые могут помочь в оптимизации и автоматизации работы. В том числе, появляется возможность использовать препроцессоры, например, Sass или Less, шаблонизаторы такие, как Nunjucks или Pug, а также другие инструменты, которые помогут Вам делать свой продукт качественным. Одна из главных причин использования подобного рода софта — это экономия времени и упрощение процесса разработки. Без использования сборщиков, верстальщику приходилось бы вручную выполнять множество операций, которые можно было бы автоматизировать, что Вы 100% прочувствовали на себе. ## Parcel Первый сборщик, который мы рассмотрим, будет Parcel — самый простой из всех существующих сборщиков проектов, так как не нуждается в конфигурации. Благодаря такому описанию, можно подумать, что из-за этого я начну Вам рассказывать, что это лучший выбор новичка, но нет! С него начинать своё знакомство со сборщиками просто бессмысленно, как раз таки из-за его плюса/минуса (тут, как посмотреть), просто потому что Вы ничему не научитесь, нового узнать не сможете, и подойдёт он исключительно для тех, кому нужен проект «уже вчера», либо же для тех, кому нужно проверить быстренько гипотезу и ему не хочется качать для этого тяжёлую готовую сборку, либо же настраивать её вручную. Ссылка на главную страницу Parcel -> https://parceljs.org/ ### Установка ```shell yarn add parcel ``` ```shell # Для установки cli npm i -g parcel-cli # Для установки в проект npm i parcel ``` ```shell pnpm add parcel ``` ### Использование Запуск dev режима: ```shell # Конкретный файл parcel src/index.html # Несколько файлов parcel src/a.html src/b.html # Все файлы по конкретному признаку (кавычки обязательы, кста) parcel 'src/*.html' # Конкретная директория parcel packages/frontend # Конкретная директория, но через рег. выражение parcel 'packages/*' # Текущая директория parcel ``` Запуск build режима: ```shell # Всё тоже самое, что и 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/ ### Установка ```shell yarn add gulp ``` ```shell # Для установки в проект npm i -D gulp # Для установки CLI npm i -g gulp-cli ``` ```shell pnpm add gulp ``` ### Использование Всё зависит от ваших команд внутри `gulpfile.js`, но стандартная задача запускается так: ```shell gulp ``` ## WebPack Следующим генератором статики будет некий WebPack – один из самых мощных генераторов статики. Он предлагает широкий спектр настроек и инструментов для управления зависимостями, оптимизации и управления ресурсами. Webpack имеет несколько преимуществ перед другими сборщиками, например, он быстрее, чем Gulp, и его конфигурация более гибкая и масштабируемая. Однако, именно по этой причине, для новичков Webpack может показаться крайне, сложным в использовании. Ссылка на сайт -> https://webpack.js.org/ ### Установка ```shell yarn add webpack ``` ```shell # Для установки в проект npm i -D webpack # Для установки CLI npm i -g webpack-cli ``` ```shell pnpm add webpack ``` ### Использование Запуск dev режима: ```shell webpack serve --open --mode development ``` Запуск build режима: ```shell 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.

```shell yarn create vite ``` ```shell npm create vite@latest ``` ```shell pnpm create vite ``` ### Использование Так как Vite предоставляет сразу готовые шаблоны, то разработчики позаботились о том, чтобы вне зависмости от выбранной технологии, можно было запускать сборку/разработку проекта очень просто. Они добавили в package.json добавили пункт scripts, где описали нужные команды для запуска режимов. Например: ```json { "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-модули | - Меньшее кол-во плагинов, так как слишком новая разработка | Если Вам хочется отдельной статьи по каждому сборщику, али же просто нашли какую-то неточность, ошибку, а может просто хотите пообщаться об этой теме, то жду Вас всех в нашем сообществе :) Всем пока и удачи в ваших начинаниях!

Александр Васильев

Live-превью

Multi Cinema

Статьи

PRO Сборщики: Что это и зачем?