Содержание

Grunt- и Gulp-таски для оптимизации производительности

#Grunt- и Gulp-таски для оптимизации производительности

Снижение производительности может влиять на вовлечённость пользователей, на их ощущения от взаимодействия с сайтом и его доходность. К счастью, команда проекта «Make The Web Faster» из Google предложила набор наилучших практик для поддержания ваших страниц лёгкими, быстрыми и привлекательными. Они включают минификацию ресурсов вроде CSS и JavaScript, оптимизацию изображений, встраивание CSS в разметку, удаление неиспользуемых стилей и т.д.

Если вы имеете полный доступ к вашему серверу, отличным вариантом для вас будет использование модуля PageSpeed для Apache и Nginx с фильтрами для многих из этих задач. Тем не менее, если же доступа нет, или вы понимаете, что модуля будет не достаточно, существует достаточно плагинов для систем сборок, использование которых, пожалуй, позволит восполнить пробелы с более точным контролем производительности.

Ниже представлены Grunt- и Gulp-плагины, которые команда Yeoman регулярно использует в своих проектах.

Мы постарались сохранить список целенаправленным и исключить прежние рекомендации, которые не представляют такой большой ценности, но того, что представлено здесь достаточно, чтобы помочь вам поддерживать страницы и их ресурсы настолько компактными, насколько это возможно.

Примечание: Генератор webapp для Grunt и Gulp от команды Yeoman уже включает плагины для оптимизации изображений, конкатенации и минификации HTML/CSS/JS. Мы считаем, webapp — отличная основа, а настоящая статья охватывает плагины, выходящие за пределы этих процессов.

Сжатие и оптимизация изображений

Средняя веб-страница сейчас занимает чуть больше 1.5 Мб, включая изображения, составляющие большую часть от этого объёма. Мы стремимся поддерживать размеры наших изображений настолько малыми, насколько это возможно, чтобы сократить время ожидания их загрузки пользователем.

При правильном балансе сжатия и формата вполне возможно загружать изображения вашей страницы настолько быстро, насколько это возможно. Это очень важно для пользователей мобильных устройств с ограниченными тарифными планами или медленным подключением.

Grunt
  • grunt-contrib-imagemin
  • grunt-imageoptim (только для OSX)

Почему два плагина? Ок, вот вам отличный анализ различий между ними. Можете выбрать один, наиболее подходящий для вас.

Gulp
  • gulp-imagemin

На момент написания статьи ещё не существовало плагина для Gulp, использующего ImageOptim.

Примечание: Ребята из Etsy выяснили, что добавление всего лишь 160 Kб изображений на их страницы увеличивает отказ пользователей мобильных устройств на 12%. Если вы не можете сократить количество изображений на страницах, хотя бы оптимизируйте их.

Генерация отзывчивых изображений для элемента

<picture>

Если у вас сайт с RWD, адаптирующийся под различные устройства, вы также можете делать отзывчивыми и изображения.

Отдача излишне больших изображений браузеру может влиять на производительность загрузки и отображения страницы, и это не единственные характеристики, которые могут от этого пострадать.

Это одна из причин, по которой нам нужно использовать отзывчивые изображения, и в связи с этим мы рады приветствовать srcset — то, что, как мы надеемся, приведёт к полному внедрению элемента <picture>.

Существует несколько Grunt-плагинов, помогающих генерировать несколько изображений с различными разрешениями в рамках вашего процесса сборки проекта.

Grunt
  • grunt-responsive-images — используйте вместе с Imager.js, элементом <picture> или полифилом picturefill.
  • grunt-clowncar

Кроме того, если вам нужно изменить размер больших изображений, можете воспользоваться grunt-image-resize.

Примечание: Исследование Тима Кадлека в области отзывчивых изображений привело к выводу, что их использование может привести к экономии до 72% на размере изображений. Несмотря на то, что пока ещё рано делать выбор в пользу отзывчивости, BBC и Guardian используют Imager.js в качестве кросс-браузерного решения.

Минификация SVG изображений

SVG файлы, созданные в редакторах, обычно содержат большое количество избыточной информации (мета-данные, комментарии, скрытые элементы и т.д.). Всё это может быть совершенно безвредно удалено или сконвертировано в более компактное представление, не влияя на отрисовку.

Grunt
  • grunt-svgmin
Gulp
  • gulp-svgmin

Генерация спрайтов

Grunt
  • grunt-spritesmith
Gulp
  • gulp-sprite

Конвертация изображений в WebP

WebP это современный формат изображений, который предлагает сжатие изображений для веба с потерями и без. Изображения WebP со сжатием без потерь по размеру на 26% меньше, чем PNG и со сжатием с потерями на 25-34% меньше, чем JPEG. Это достаточно экономично и, к счастью, существуют Grunt- и Gulp-плагины кодирования WebP.

Grunt
  • grunt-webp
Gulp
  • gulp-webp

Примечание: Тест, проведённый WebPageTest, говорит, что в сравнении с JPEG загрузка изображений WebP происходит гораздо быстрее, благодаря их маленькому размеру. В Chrome Web Store выяснили, что использование WebP дало в среднем 30% экономии, что сохраняет им несколько терабайт трафика в день.

Сборка SVG спрайтов с поддержкой для различных браузеров

Grunt

  • grunticon

Gulp

  • gulp-svgmin

Мы считаем, что встраивание изображений используя Data URI сейчас стало анти-паттерном, влекущим за собой низкую производительность на мобильных устройствах.

Минификация CSS

Минификация устраняет лишние пробелы, переносы строк, отступы и символы, которые обычно не нужны в релизной версии вашего продукта. Сжатие HTML-, CSS- и JS-файлов может улучшить парсинг, выполнение и время загрузки. Касательно CSS мы рекомендуем:

Grunt
  • grunt-contrib-cssmin
Gulp
  • gulp-cssmin

Удаление неиспользуемого CSS

В проектах, основанных на CSS-фреймворках вроде Bootstrap, Foundation и т.д. вы обычно не используете всё разнообразие доступных стилей. Вместо того, чтобы включать весь фреймворк в релиз, используйте UnCSS для удаления неиспользуемых вашими страницами стилей. Таким образом, некоторые разработчики облегчают свои таблицы стилей до 85% от исходного размера.

Grunt
  • grunt-uncss
Gulp
  • gulp-uncss

Примечание: Наиболее часто задаваемый разработчиками вопрос по поводу UnCSS или процесса удаления неиспользуемого CSS это может ли он также работать со стилями, внедряемыми в страницу динамически. Наш ответ — «да». Это стало возможным благодаря тому, что UnCSS работает в паре с PhantomJS. Разработчики получают от 10 до 120 Кб экономии на типовой Bootstrap-странице, и настолько же хорошо UnCSS работает и с другими фреймворками.

Встроенный CSS

Если внешние CSS-ресурсы для конкретной страницы небольшие, вы можете встроить их в вашу разметку, экономя при этом на дополнительных запросах к серверу. Встраивание небольшого количества CSS позволяет браузеру мгновенно приступить к отрисовке страницы.

Grunt
  • grunt-inline-css
Gulp
  • gulp-inline-css

Комбинирование медиа-выражений

Хоть это и не является рекомендацией команды PageSpeed, но вы имеете возможность комбинировать медиа-выражения в единые определения. Мы сочли эти плагины полезными для обработки CSS, генерируемого препроцессорами, которые могут использовать вложенные определения медиа-запросов.

Grunt
  • grunt-combine-media-queries
Gulp
  • gulp-combine-media-queries

JavaScript

Минификация, сжатие JS

Grunt
  • grunt-contrib-uglify
  • grunt-closure-compiler
Gulp
  • gulp-uglify
  • gulp-closure-compiler

RequireJS (оптимизация с r.js)

Grunt
  • grunt-requirejs
Gulp
  • RequireJS

Минификация HTML

Grunt
  • grunt-contrib-htmlmin
Gulp
  • gulp-htmlmin

Простая конкатенация

Grunt
  • grunt-contrib-concat
Gulp
  • gulp-concat

Общее сжатие для файлов/папок

Grunt
  • grunt-contrib-compress
Gulp
  • gulp-zip

Сжатие Zopfli

Алгоритм сжатия Zopfli — это библиотека сжатия с открытым исходным кодом, которая генерирует выходные данные на 3-8% меньше в сравнении с zlib при максимальном уровне сжатия.

Он лучше всего подходит для приложений, в которых данные сжимаются только один раз, а затем передаются по сети большое количество раз.

Grunt
  • grunt-zopfli
Gulp
  • gulp-zopfli

Примечание: Когда в Google Fonts начали использовать Zopfli, шрифты стали легче в среднем на 6%, а в некоторых случаях на 15%. По словам Ильи Григорика, для Open Sans уменьшение размера было более чем на 10%, что сказалось на уменьшении времени на отрисовку и загрузку. Однако, изображения сжатые с Zofli декодируются дольше, чем обычные JPG. Эти показатели можно использовать для принятия решения о целесообразности использования WebP.

Встраивание CSS критического пути

Критический путь представляет собой код и ресурсы, необходимые для отрисовки контента, расположенного в верхней части страницы (прим. пер.: дословно «above-the-fold» — до сгиба, т.е. первый экран страницы) — то есть то, что ваши пользователи увидят в первую очередь, когда они станут загружать вашу страницу. PageSpeed рекомендует встраивать ваши необходимые стили для улучшения производительности. В то время, как инструменты вроде mod_pagespeed достаточно высоко эффективны для достижения этого, оптимизировать необходимые стили другими инструментами гораздо сложнее.

Вы можете использовать PhantomJS со скриптами speedreport, чтобы получить представление о том, какие стили отвечают за верхушку страницы и затем вручную оптимизировать их.

Примечание: Пол Кинлэн написал букмарклет для оценки стилей верхушки страницы, который тоже стоит посмотреть.

Asset pipeline (авто-обработка всех оптимизаций)

Одним из инструментов, на которые стоит обратить внимание является AssetGraph.

AssetGraph смотрит на проекты как на набор задач на графах, где узлами считаются наборы ресурсов (HTML, CSS, изображения, JS), а рёбрами — отношения между ними (теги img, a, script и т.д.).

Если AssetGraph определит, как проектные наборы ресурсов связаны друг с другом, он может автоматически выполнить большинство оптимизаций производительности. Это работает, в частности, на маленьких проектах и в данный момент идёт работа над поддержкой для больших проектов.

Grunt
  • grunt-reduce
Gulp

Пользователи Gulp должны использовать непосредственно AssetGraph.

Сравнительный анализ

Приведённые ниже бенчмарк-плагины полезны для использования в качестве части реализации подхода непрерывной интеграции (Continuous Integration). Несмотря на то, что в настоящее время они доступны только для Grunt, вы можете использовать gulp-grunt для запуска Grunt-тасков через Gulp. Мы рекомендуем:

  • grunt-pagespeed — превосходен для автоматического определения ваших количества очков PageSpeed как часть непрерывной интеграции.

  • grunt-topcoat-telemetry — получение гладкости, времени загрузки и другой статистики из Telemetry, как часть процесса непрерывной интеграции. Это может помочь вам настроить панель сравнительного анализа производительности, похожую на ту, что используют в TopCoat.

  • grunt-wpt — непрерывная интеграция с очками WebPageTest.

  • grunt-phantomas — время ответа на запросы, на ответы, время загрузки первого изображения/CSS/JS, время события готовности DOM и другое.

Framework Optimization

Grunt
  • grunt-ngmin
  • grunt-react
  • grunt-vulcanize — хорош для конкатенации веб-компонентов
Gulp
  • gulp-ngmin
  • gulp-react
  • gulp-vulcanize
Misch
  • gulp-google-cdn
  • gulp-size

Заключение

Снижение производительности может влиять на вовлечение пользователя и его впечатления от взаимодействия с ресурсом. Уделите время на эксперименты с плагинами для оптимизации производительности — узнайте, какие практические выгоды они могут дать вашим проектам.

Посетители ваших сайтов будут счастливее в результате мгновенного отклика, да и вообще, быстрый веб — лучше для всех.

Gulp.js | Loftblog

Курс

Gulp. js

Gulp.js — потоковый сборщик проектов на JS. Gulp.js поможет вам оптимизировать рутинные дела web-разработчика.

Содержание

    #06 — Сборка и деплой проекта, gulp-useref, gulp-sftp.

    Вот мы и дошли до шестого урока видеокурса по gulp.js. Пора отправлять ваш проект на хостинг. Сможете? Если нет, то этот урок окажет вам существенную помощь в таком непростом для новичков вопросе. На занятии будет осуществлена автоматическая сборка проекта в папку dist и отправка файлов на продакшен. В процессе всех этих действий вы узнаете, как […]

    #05 — Структура проекта, wiredep, bower.

    Сегодняшний наш урок посвящен правильной сборке для Production сайта и составлению грамотной его структуры. Эта структура является наиболее популярной среди фронтенд-разработчиков. Пакетный менеджер bower В центре внимания будет находиться корректная работа с bower. Bower — это пакетный менеджер для web. С его помощью легко осуществляется поиск, установка, обновление и удаление библиотек. Большинство профессиональных разработчиков имеют […]

    #04 — Боремся с кэшированием или ревизии подключаемых файлов.

    Мы продолжаем наш курс по Gulp.js. На этом уроке мы рассмотрим проблему кэширования файлов. При обычном подключении различных файлов, таких как стили, скрипты, изображения и т.д. они могут закэшироваться браузером/сервером и произведенные в них изменения останутся незамеченными, а страничка сайта будет отображаться в браузере без изменений. В данном видео показана работа gulp-плагинов для борьбы с […]

    #03 — gulp-sass, gulp-uncss.

    Есть в сборщике gulp.js плагин, который позволяет ему работать с другой программой автоматизации разработки сайтов — препроцессором Sass. Это плагин gulp-sass. Он компилирует файлы sass в css. На этом уроке и будет рассмотрена установка этого плагина, его запуск и работа. Вы увидите gulp-sass в действии. Вы также узнаете, как сократить размер стилей в несколько раз. […]

    #02 — autoprefixer, livereload, gulp-connect.

    Продолжаем исследование возможностей потокового сборщика проектов — gulp.js. Героями сегодняшнего урока станут еще ряд плагинов, которые также значительно сокращают время разработки сайтов, а работу верстальщиков и программистов делают более быстрой. Сегодня будет рассказано о плагине, который автоматически добавляет префиксы для любых версий браузеров, т.е. элемент будет адекватно отображаться в любом браузере, даже при отсутствии поддержки […]

    #01 — Работаем с CSS: concat, minify, rename, notify, watch, dest.

    Блаженство тела состоит в здоровье, блаженство ума — в знании. Фалес Для любого веб-разработчика создание сайтов вручную без использования каких-либо программ автоматизации через некоторое время становится очень скучным занятием, превращается в рутину. А рутина в работе еще никому не доставляла удовольствия. Для этого и были созданы специальные программы, облегчающие и ускоряющие труд разработчиков. К одной […]

gulp-uncss-task — Анализ работоспособности пакетов npm

Все уязвимости безопасности принадлежат производственных зависимостей прямых и косвенных пакеты.

Риск безопасности и лицензии для важных версий

Все версии

Лицензия
Массачусетский технологический институт

Политика безопасности
Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (4)

Скачать тренд

Звезды GitHub
64

Вилки
8

Авторы
4

Популярность прямого использования

Пакет npm gulp-uncss-task получает всего 4 загрузки в неделю. Таким образом, мы забили Уровень популярности gulp-uncss-task будет ограничен.

На основе статистики проекта из репозитория GitHub для npm package gulp-uncss-task мы обнаружили, что снялся 64 раза.

Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.

Частота фиксации

Нет последних коммитов

Открытые проблемы
3

Открытый PR
0

Последняя версия
9 лет назад

Последняя фиксация
8 лет назад

Дальнейший анализ состояния обслуживания gulp-uncss-task на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.

Важным сигналом обслуживания проекта для gulp-uncss-task является это не видел никаких новых версий, выпущенных для npm в за последние 12 месяцев и может считаться прекращенным проектом или проектом, который получает мало внимания со стороны его сопровождающих.

За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.

Совместимость с Node.js
не определен

Возраст
9 лет

Зависимости
3 прямых

Версии
5

Установочный размер
0 Б

Распределенные теги
1

Количество файлов
0

Обслуживающий персонал
1

Типы TS
Нет

gulp-uncss-task имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм. Это означает, что для этого могут быть доступны другие теги. пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать стабильные релизы.

Использование плагинов Gulp.js для анализа JavaScript — Gulp.js 3.9- ПРОМЕЖУТОЧНЫЙ

Gulp.js 3.9 | Средний

  • 15 видео | 59м 44с
  • Получает значок

Узнайте, как работать с Gulp.js! Давайте посмотрим, как вы можете использовать плагины Gulp.js, чтобы помочь вам в анализе вашего кода JavaScript, а также в компиляции и оптимизации файлов CSS.

ЧТО ВЫ УЗНАЕТЕ

  • описывает цель подключаемых модулей JSHint и JSCS для выполнения анализа кода на основе JavaScript

    установить и настроить подключаемые модули Gulp JSHint и JSCS для линтинга JavaScript и проверки стиля кода

    создать код для задач JSHint и JSCS в Gulp

    установить и использовать подключаемый модуль Gulp concat для объединения нескольких файлов в один

    установить отдельные плагины Gulp, а также использовать отложенную загрузку для загрузки всех плагинов Gulp

    установите и используйте плагин Gulp uglify для минимизации вашего кода JavaScript

    создание и работа с повторно используемым файлом конфигурации в Gulp

    установите и используйте плагин Gulp SASS для компиляции кода CSS

  • установите и работайте с плагином автопрефиксера Gulp, чтобы добавить префиксы поставщиков в ваш код CSS

    установите и используйте плагин Gulp csslint для обнаружения проблем в коде CSS

    установите и используйте плагин Gulp uncss для оптимизации кода CSS

    установите и используйте плагин Gulp csso, чтобы удалить все ненужные символы из вашего кода CSS

    работать с методом ошибки в Gulp для обработки ошибок в коде CSS

    Установите инструмент Gulp Plumper и работайте с ним, чтобы выполнять обработку ошибок в коде CSS

    определяет API-интерфейсы Gulp и основные плагины, используемые для работы с кодом JavaScript и CSS

В ЭТОМ КУРСЕ

  • 3 м 57 с

    По завершении этого видео вы сможете описать назначение подключаемых модулей JSHint и JSCS для анализа кода в сравнении с JavaScript.

    СВОБОДНЫЙ ДОСТУП

  • 2м 6с

    В этом видео вы узнаете, как установить и настроить подключаемые модули Gulp JSHint и JSCS для линтинга JavaScript и проверки стиля кода.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    3. Задачи кодирования с помощью JSHint и JSCS

    4м 5с

    В этом видео вы узнаете, как создать код для задач JSHint и JSCS с помощью Gulp.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    4. Объединение файлов

    3 м 45 с

    В этом видео вы узнаете, как установить и использовать плагин Gulp concat для объединения нескольких файлов в один.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    5. Загрузка плагинов Gulp

    3 м 33 с

    В этом видео вы узнаете, как установить отдельные плагины Gulp, а также использовать отложенную загрузку для загрузки всех плагинов Gulp.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    6. Минимизация JavaScript

    2 м 50 с

    В этом видео вы установите и используете плагин Gulp uglify для минимизации кода JavaScript.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    7. Создание модуля конфигурации

    5 м 40 с

    В этом видео вы создадите повторно используемый файл конфигурации в Gulp и будете работать с ним.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    8. Использование компилятора SASS

    2 м 35 с

    В этом видео вы узнаете, как установить и использовать плагин Gulp SASS для компиляции кода CSS.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    9. Использование плагина AutoPrefixer

    4 м 26 с

    В этом видео вы узнаете, как установить плагин автопрефиксера Gulp и работать с ним, чтобы добавить префиксы поставщиков в ваш код CSS.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    10. Линтинг CSS

    4м 57с

    В этом видео вы узнаете, как установить и использовать плагин Gulp csslint для поиска проблем в коде CSS.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    11. Оптимизация CSS

    5м 3с

    В этом видео вы установите и будете использовать плагин Gulp uncss для оптимизации кода CSS.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    12. Минимизация CSS

    3 м 37 с

    Узнайте, как установить и использовать плагин Gulp csso для удаления всех ненужных символов из кода CSS.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    13. Добавление обработки ошибок

    5м 20с

    В этом видео вы узнаете, как работать с методом «при ошибке» в Gulp для выполнения обработки ошибок в коде CSS.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    14. Обработка ошибок с помощью Gulp Plumber

    4м 27с

    Узнайте, как установить инструмент Gulp Plumper и работать с ним для обработки ошибок в коде CSS.

    СВОБОДНЫЙ ДОСТУП
  • Заблокировано

    15. Упражнение: Использование Gulp и подключаемых модулей Gulp

    3 м 23 с

    В этом видео вы узнаете, как идентифицировать Gulp API и основные плагины, используемые для работы с кодом JavaScript и CSS.

    No related posts.