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

October 11, 2015

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

У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется 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 тесты

gulp-nodeunit

gulp-jasmine

gulp-qunit

gulp-mocha

gulp-karma


Графика

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

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

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

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

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

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 - помогает правильно описать зависимости.

Комментарии

comments powered by Disqus