Зачем использовать инструменты минификации, такие как Grunt, cssnano и Gulp, когда есть онлайн-минифайнеры?
Я работаю над улучшением скорости загрузки моего сайта, и одна из вещей, которые мне нужно сделать, - минимизировать все мои CSS/JS.
Я вижу сайты в Интернете, чтобы минимизировать эти файлы за считанные секунды, поэтому мне интересно, почему существует необходимость использовать такие технологии, как Grunt, cssnano и Gulp. Я не думаю, что эти технологии минимизируют эти файлы при загрузке страницы каждый раз, потому что это добавит дополнительные накладные расходы, поэтому я изо всех сил пытаюсь найти преимущество в их использовании. Может быть, если есть сотни файлов для минимизации, я вижу преимущество, но я работаю с менее чем 10 CSS-файлами.
5 ответов
Преимущества? Пункт 2 теста Джоэла: Построить за один шаг.
У вас могут быть сложные проекты с большой кодовой базой, и единственное, что вам нужно сделать, это запустить:
npm run build
Тогда разверните...
Все дело в автоматизации и сокращении количества шагов для создания необходимых файлов / ресурсов. Чаще всего это так же просто, как сохранить файл CSS/JS/HTML(шаблон), который будет запускать минификацию, конкатенацию, генерацию файлов и т. Д.
В других случаях это простая команда, которую вы запускаете как grunt build это делает кучу разных вещей для создания файлов, которые вам понадобятся для производственной среды.
Я лично использую Grunt и всегда слежу за сохранением файлов CSS, JS и шаблонов.
Пара основных примеров:
CSS
Вы обновляете пару значений свойств в style.css, Как только вы сохраните изменения, BOOM! style.min.css генерируется. Преимущество в том, что вам не нужно было копировать и вставлять в Интернет (из вашего поста, я полагаю, вы делаете это 10 раз), минимизировать, а затем копировать и вставлять из Интернета в локальный файл.
Кроме того, вы, как правило, хотите кэшировать CSS-файлы бюста. Вы делаете это, добавляя значение кеша к имени файла или в качестве параметра запроса. Бегущий по заданию также сделает это, когда вы сохраните свои изменения, БУМ! style-12345.min.css создан или ?v=12345 обновляется в шаблоне автоматически. Все, что вам нужно было сделать, это ударить CTRL+S чтобы все это произошло, или наберите и выполните простую команду (grunt css).
Есть также CSS-препроцессоры, такие как SCSS и LESS, которые позволяют вам использовать переменные, функции и т. Д. В вашем CSS. Исполнитель задач может обработать эти файлы перед выполнением конкатенации, минификации и т. Д. Опять же, все, что вам нужно было сделать, это сохранить файл, и все это происходит в фоновом режиме.
JS
У вас есть пара виджетов для вашего сайта. Вы можете написать и сохранить весь свой код в script.js или вы можете сохранить каждый виджет (среди других скриптов) в своих собственных файлах и объединить их все в один файл. Если у вас есть исполнитель задач и вы храните свои сценарии в отдельных файлах, как только вы их измените, BOOM! script.min.js генерируется. До минификации вы могли сохранить a.js что вызвало a.js, b.js а также c.js быть объединены, помечены (проверить качество кода) и минимизированы.
Вам также не нужно беспокоиться о том, правильно ли вы скопировали и вставили каждый файл или даже сохранили минимизированный результат, все это просто происходит.
Есть много вещей, которые могут быть автоматически сделаны с вашими файлами, все с простым сохранением и никаких других действий с вашей стороны не требуется.
Такие исполнители, как ( gulp, grunt, Webpack), очень полезны для сотен целей. Даже в крошечных проектах вы можете получить такие преимущества, как:
Производительность:
В этих полях мало что можно объяснить, используя инструменты для конкатенетирования и минимизации результатов в меньшем количестве архивов и меньшем количестве запросов, все в одном комплекте.
Читаемость:
В вашей среде разработки вы можете прочитать весь код и использовать инструменты для их сбора и / или проверки, что очень полезно во избежание дальнейших проблем!
Масштабируемость:
Это самая важная IMO, работа с запущенным проектом с помощью обработчика задач означает (если сборка выполнена правильно) в хорошем коде, который можно применить к другим проектам или, может быть, в большем масштабе.
Организация / Экономия времени:
Например, с модулями для модуляции HTML вы можете просто включить "кусочки" DOM и загрузить на любую страницу, какую захотите! Представьте, например, что у вас есть раздел под названием "продажа 01", и они добавлены в 50 html-страниц, представьте себе, насколько сумасшедшим будет, если вы просто отредактируете свой sale01.html и все страницы, которые загружают это содержимое, были изменены!
Горячая / живая перезагрузка:
Когда вы изменяете код, который вам не нужно перезагружать, браузер делает это за вас.
Вы можете автоматизировать свой процесс, как только он будет настроен.
Хорошая статья о глотке. Я не знаю, какова ваша среда сборки, поэтому я не могу сказать, какой инструмент подходит для ваших целей, но с онлайн-инструментами это не лучший способ автоматизации ваших процессов.
ОБНОВЛЕНИЕ 1:
Минимизирует ли он css/js до загрузки новой страницы или минимизирует их один раз и создает новый каталог с минимизированными файлами, которые будут использоваться позже?
ДА
Повторно минимизируется, когда он обнаруживает, что файлы были изменены?
ДА, если вы настроили это. Здесь я просто минимизирую при сборке проекта, это экономит мое время.
Зачем копировать все, когда Gulp или Grunt могут сделать это автоматически для вас? Вы также можете указать, в какую папку и / или файл должен быть помещен скомпилированный код. И вы можете собрать все свои скрипты или таблицы стилей в 1 файл. Таким образом, вы можете уменьшить количество вызовов, которые браузер делает с вашими файлами. Они компилируются при изменении файла, так что вы даже не заметите этого;)
Существует огромная разница между тем, где вы начали с этого вопроса ("зачем использовать эти инструменты, когда существуют онлайн-минифайнеры?") И тем, где вы в конечном итоге использовали его ("почему я должен использовать эти инструменты, когда существуют онлайн-минифайнеры?"),
Я не могу говорить о том, что работает для вашего процесса сборки, поэтому, если вы хотите вручную передавать каждый файл через онлайн-минификатор, я не буду вам этого советовать.
Но почему можно выбрать такой инструмент, как grunt:
Потому что его можно сделать частью повторяющегося процесса автоматической сборки, который может быть шире, чем просто минимизация ресурсов на стороне клиента.
Да, это может иметь большее значение, если у вас есть больше ресурсов. Но это также может иметь большее значение, если вы планируете сделать больше, чем один производственный выпуск. Или по любой причине, что люди могут заботиться об автоматизации сборки, на самом деле.