Автор оригинала: FreeCodeCamp Community Member.
Roneesh
Инструменты сборки передней части могут быть запутаны даже для опытных разработчиков, как я. Решение состоит в том, чтобы понять, как они работают – и работают вместе – на концептуальном уровне.
В этой статье представлен мой самоуверенный подход к ощущению инструментов по сборке передней части. Вместо того, чтобы погрузиться в код, я буду проходить вас через свою ментальную модель того, как эти инструменты работают и что они достигают.
Не пугайтесь государством искусства
Узел, NPM, Grunt, Gulp, Bower, WebPack, Webpack, Browserify, Yeoman, Brunch … Есть так много интерфейсных инструментов сборки, что может показаться невозможным.
Ключ не запугивается. Все эти проекты предназначены для облегчения вашей жизни.
Чтобы понять, что, почему и как эти инструменты вам просто нужно понять несколько концепций.
Концепция № 1 – Основная дихотомия инструментов сборки – «Установка против работы»
Инструменты сборки делают две вещи:
- Устанавливать вещи
- Заниматься вещами
Первый вопрос, который нужно задать себе, когда сталкивается с новым инструментом сборки: «Этот инструмент предназначен для установки вещей для меня или делать для меня?»
«Установка» инструментов, таких как NPM, Bower и Yeoman, может установить в значительной степени все. Они могут устанавливать интерфейсные библиотеки, такие как Angular.js или rest.js. Они могут устанавливать серверы для вашей среды Dev. Они могут установить тестирование библиотек. Они даже помогут вам установить другие инструменты сборки передней части.
Короче говоря, они устанавливают большинство любых, связанных с кодом вещей, о которых вы можете подумать.
«Делая» инструменты, такие как Grunt, WebPack, Endure.js, Brunch и Gulp, гораздо сложнее. Целью «Doing» инструментов состоит в том, чтобы автоматизировать все задачи на меню и погрешности в веб-разработке. То, что они делают, иногда называют «заданиями».
Для этих «задач» они часто используют свою собственную экосистему пакетов и плагинов. Каждый инструмент записывает задачи по-разному. Эти инструменты также не все делают то же самое. Некоторые «делать» инструменты пытаются обрабатывать любую задачу, которую вы бросаете на нее (Grunt, Gulp и т. Д.). Другие сосредоточены на одном, например, обрабатывающих зависимости JavaScript (Browserify, require.js и т. Д.).
Иногда вы в конечном итоге используете несколько этих инструментов в том же проекте.
Вот краткий список «задач», которые я автоматизировался с этими «делать» инструменты:
- Замена строки текста в файл
- Создание папок и движущихся файлов в эти папки
- Запуск моих модульных тестов с одной командой
- Освежающий мой браузер, когда я сохраню файл
- Объединение всех моих файлов JavaScript в One, и все мои файлы CSS в один
- Обозначение моего объединенных файлов JavaScript и CSS
- Изменение размещения объектов