Самые нужные плагины для Gulp

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


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

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

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

HTML&CSS

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

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

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

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

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

gulp-csso — отличный CSS минификатор. На сегодняшний день существует целый ряд CSS компрессоров и сравнительная таблица (GitHub) по ним. Но недавно я увидел лучшую Shorthand утилиту без 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 — простой HTML минификатор.

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

gulp-csslint — CSS линтер.

gulp-htmlhint — HTML валидатор.

JavaScript

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

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

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

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

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

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

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

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

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

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

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

gulp-uglify — JavaScript компрессор.

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

Unit тесты

Графика

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

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

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

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

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

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

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

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

Разное

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Компиляторы

gulp-less — LESS в CSS.

gulp-sass — SASS/SCSS в СSS.

gulp-compass — SASS с Compass в CSS.

gulp-stylus — Stylus в CSS.

gulp-coffee — CoffeeScript в JavaScript.

gulp-jade — Jade в HTML.

gulp-handlebars — Handlebars шаблоны в JST.

gulp-jst — Underscore шаблоны в JST.

gulp-react — Facebook React’s JSX шаблоны в JST.

gulp-nunjucks — Nunjucks шаблоны в JST.

gulp-dustjs — Dust шаблоны в JST.

gulp-angular-templatecache — AngularJS шаблоны в JST.

Напоследок

psi — PageSpeed Insights with reporting.

tmi — TMI (Too Many Images) — discover your image weight on the web.

ngrok — Introspected tunnels to localhost.

pageres — удобная утилита для создания скриншотов сайтов в разных разрешениях.

Возможно, некоторые методы автоматизации вам будет удобнее использовать прямо в редакторе — Лучшие плагины для SublimeText.

matchdep — помогает правильно описать зависимости.

grunt-html-build

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

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

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

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

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

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

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

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

grunt-proxy and grunt-connect-proxy — connect support for proxying API calls during development.

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

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

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.