Это пост можно сказать является дубликатом моей предыдущей подборки “Самые нужные плагины для 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, которая делает приблизительно следующее:
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;
}
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.
Некоторые из отсутствующих:
grunt-html-build — универсальный помощник в верстке. Плагин умеет объединять исходные файлы и создавать полноценные шаблоны/блоки для вашего HTML. Еще для похожих задач очень хорош grunt-include-replace.
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 для помощи работы с этим.
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 — помогает правильно описать зависимости.
