^[1]

Это пост можно сказать является дубликатом моей предыдущей подборки “Самые нужные плагины для Grunt” ^[2]. Дело в том, что спустя много часов поиска я не нашел крутых плагинов для Gulp, которых нет для Grunt за исключением пары весьма специфичных утилит. Всё как раз наоборот, но проигнорировать множество пользователей Gulp я не мог. Все недостающие плагины я выделил, потому что Gulp умеет использовать их из Grunt, как и Grunt из Gulp.

Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.

У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Gulp. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Gulp найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.

А еще я выложил подборку на GitHub ^[1], чтобы каждый мог пополнить коллекцию.

HTML&CSS

autoprefixer ^[3] — один из самых полезных плагинов, который автоматически расставляет префиксы к CSS свойствам, исходя из статистики caniuse ^[4]. Важно сказать, что Автопрефиксер это лишь один из множества дополнений в рамках проекта PostCSS ^[5] от Злых Марсиан.

gulp-browser-sync ^[6] — вероятно, самый нужный инструмент, с точки зрения повышения продуктивности веб-разработчиков. BrowserSync создает подключение, после чего производит автообновление страницы во всех браузерах на всех устройствах при изменениями не только клиентских или даже серверных файлов. А плюс ко всему синхронизирует позицию скроллинга и заполненные данные в формах.

gulp-useref ^[7] — парсит специфичные блоки и конкатенирует описанные в них стили и скрипты. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

gulp-email-design ^[8] — бесценный инструмент при верстки писем, который переводит все CSS стили в инлайновые, автоматически изменяя все пути к файлам, опционально умеет загружать изображения на CDN и даже отсылать письма на почту.

gulp-uncss ^[9] — лучшее решение для оптимизации CSS файлов. Плагин анализирует HTML код и находит все неиспользуемые и продублированные стили.

gulp-csso ^[10] — отличный CSS минификатор. На сегодняшний день существует целый ряд CSS компрессоров и сравнительная таблица (GitHub) по ним. Но недавно я увидел лучшую Shorthand ^[11] утилиту без Gulp, которая делает приблизительно следующее:

<code>a {
    font-family: Arial;
    font-style: italic;
    font-size: 14px;
    line-height: 18px; 
    font-weight: bold;
    background-image: url('example.png');
    background-color: red;
    background-size: cover;
    background-repeat: no-repeat;
}

=>

a {
  font: italic bold 14px/18px Arial;
  background: red url('example.png') no-repeat / cover;
}
</code>

gulp-htmlmin ^[12] — простой HTML минификатор.

gulp-csscomb ^[13] — облагораживает структуру ваших CSS.

gulp-csslint ^[14] — CSS линтер.

gulp-htmlhint ^[15] — HTML валидатор.

JavaScript

gulp-autopolyfiller ^[16] — мега крутой плагин, который похож на Autoprefixer и подбирает все необходимые полифилы для JavaScript, чтобы вы могли использовать последние стандарты ECMAScript уже сегодня. Еще рекомендую gulp-babel ^[17], который конвертирует ES6/ES7 в ES5.

gulp-jsfmt ^[18] — полезнейший плагин для работы с JavaScript от команды Rdio, который позволяет искать конкретные фрагменты, форматировать и производить массовые изменения в коде. Также существует gulp-jsbeautifier ^[19].

gulp-jscs ^[20] — JavaScript Code Style. Замечательный инструмент со множеством конфигураций для проверки вашего кода в соответствии с существующими стайлгайдами от jQuery, Яндекса, Google, Airbnb и других.

gulp-modernizr ^[21] — помогает составить правильную архитектуру проекта на основе Modernizr.js в зависимости от возможностей браузера.

gulp-express ^[22] — запускает Express.js веб-сервер.

gulp-requirejs ^[23] и gulp-browserify ^[24] — оптимизируют работу RequireJS и Browserify соответственно.

gulp-plato ^[25] — предоставляет аналитику по вашему коду с разными метриками в виде красивых графиков.

gulp-complexity ^[26] — проверка на качество кода основанная на алгоритмах Halstead и Cyclomatic.

fixmyjs ^[27] — автоматически исправляет простые ошибки в коде после линта выполненного на основе JSHint ^[28] (gulp-jshint ^[29]).

gulp-jscpd ^[30] — для поиска дубликатов в коде.

gulp-jsonlint ^[31] — валидатор JSON файлов.

gulp-uglify ^[32] — JavaScript компрессор.

gulp-concat ^[33] — конкатенация файлов.

Unit тесты

• gulp-nodeunit ^[34]
• gulp-jasmine ^[35]
• gulp-qunit ^[36]
• gulp-mocha ^[37]
• gulp-karma ^[38]

Графика

gulpicon ^[39] — ценный плагин, который позволяет генерировать спрайты из SVG, переводить их в PNG, записывать все Data URI и подключать нужный формат в зависимости от возможностей браузера.

gulp-iconfont ^[40] — великолепный плагин для работы с веб-шрифтами. Умеет создавать WOFF, WOFF2, EOT, TTF файлы из SVG.

gulp-responsive ^[41] — простой способ сгенерировать адаптивные изображения под требуемые разрешения устройств с указанием соответствующих префиксов в наименовании.

gulp-sharp ^[42] — самый быстрый модуль для работы с JPEG, PNG, WebP и TIFF изображениями. Плагин умеет изменять размер, ориентацию, фон, альфа-канал и многое другое.

gulp-svgstore ^[43] — объединяет все подключаемые SVG файлы и записывает их в HTML как <symbol> для дальнейшего использования.

gulp-imacss ^[44] — очень удобная утилита, которая автоматически преобразовывает подключенные в CSS изображения PNG, JPG, SVG в Data URI.

gulp-imagemin ^[45] и gulp-tinypng ^[46] для сжатия изображений.

gulp-spritesmith ^[47] — автоматическая генерация спрайтов.

Разное

gulp-grunt ^[48] — позволяет запускать Grunt плагины для Gulp.

gulp-watch ^[49] — краеугольный камень в плагинной системе Gulp. Следит за всеми указанными файлами или целыми директориями и в случае каких-либо изменений выполняет описанные в конфигурациях таски.

gulp-notify ^[50] — выводит ошибки при сборке Gulp в виде системных сообщений, а главное то, что работает для разных операционных систем.

gulp-git ^[51] — позволяет использовать Git команды.

gulp-jsdoc ^[52] — генератор документации, работает на основе JSDoc3.

gulp-rev ^[53] — полезный плагин для работы с ревизиями.

gulp-release ^[54] — позволяет управлять версиями в вашем проекте.

gulp-bump ^[55] — следит за репозиторием и обновляет package.json и gulp-update ^[56], который обновляет сами пакеты.

gulp-bower-files ^[57] — подключает все необходимые Bower компоненты.

gulp-removelogs ^[58] — автоматически удаляет логи.

gulp-preprocess ^[59] — препроцессор, ссылающийся на установленные конфигурации.

gulp-duration ^[60] — отображает время выполнения тасков.

gulp-changed ^[61] и gulp-newer ^[62] — запускают таски только для изменившихся файлов.

gulp-connect ^[63] — простой веб-сервер для статических сайтов.

gulp-shell ^[64] — позволяет запускать Shell команды.

gulp-ssh ^[65] — обеспечивает возможность подключения по SSH и SFTP.

gulp-zip ^[66] — архивирует папки и файлы.

gulp-clean ^[67] и gulp-copy ^[68] — соответственно очищают и копируют указанные исходники.

gulp-filesize ^[69] — отображает размеры файлов в удобном для чтения формате.

gulp-util ^[70] — различные утилиты для разработки Gulp плагинов.

Компиляторы

gulp-less ^[71] — LESS в CSS.
gulp-sass ^[72] — SASS/SCSS в СSS.
gulp-compass ^[73] — SASS с Compass в CSS.
gulp-stylus ^[74] — Stylus в CSS.
gulp-coffee ^[75] — CoffeeScript в JavaScript.
gulp-jade ^[76] — Jade в HTML.
gulp-handlebars ^[77] — Handlebars шаблоны в JST.
gulp-jst ^[78] — Underscore шаблоны в JST.
gulp-react ^[79] — Facebook React’s JSX шаблоны в JST.
gulp-nunjucks ^[80] — Nunjucks шаблоны в JST.
gulp-dustjs ^[81] — Dust шаблоны в JST.
gulp-angular-templatecache ^[82] — AngularJS шаблоны в JST.

Напоследок

psi ^[83] — PageSpeed Insights with reporting.
tmi ^[84] — TMI (Too Many Images) — discover your image weight on the web.
ngrok ^[85] — Introspected tunnels to localhost.
pageres ^[86] — удобная утилита для создания скриншотов сайтов в разных разрешениях.
Возможно, некоторые методы автоматизации вам будет удобнее использовать прямо в редакторе — Лучшие плагины для SublimeText.
matchdep ^[87] — помогает правильно описать зависимости.

grunt-html-build ^[88]
Универсальный помощник в верстке. В отличии от незаслуженно более популярного grunt-processhtml ^[89], данный плагин умеет не только объединять скрипты и стили, но и создавать полноценные шаблоны/блоки для вашего HTML.

Еще есть отдельный grunt-email-boilerplate ^[90].

grunt-revizor ^[91] — мега крутой компрессор от MailRu, который не только минифицирует CSS, но и сокращает названиях всех классов в HTML, CSS и JavaScript файлах.

grunt-penthouse ^[92] и grunt-criticalcss ^[93] — автоматически находят Critical Path в вашем проекте. Важный момент с точки зрения производительность, о чем подробнее написано тут ^[94].

grunt-shipit ^[95] — автоматизирует deploy с помощью Shipit.

grunt-githooks ^[96] — привязывает Git Hooks ^[97] к Grunt таскам.

grunt-gitbook ^[98] — создавайте документацию с помощью потрясающей утилиты GitBook.

grunt-conventional-changelog ^[99] — генерирует список изменений на основе коммитов в Git.

grunt-proxy ^[100] and grunt-connect-proxy ^[101] — connect support for proxying API calls during development.

grunt-phantomas ^[102] — превосходный инструмент для измерения производительности проекта.

grunt-usebanner ^[103] — добавляет баннеры (копирайт или ASCII заголовки) в исходных файлах и grunt-figlet ^[104] для помощи работы с этим.

Автор: ilusha_sergeevich

Источник ^[105]