Самые нужные плагины для 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, которая делает приблизительно следующее:
gulp-htmlmin — простой HTML минификатор.
gulp-csscomb — облагораживает структуру ваших CSS.
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 файлов.
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 как для дальнейшего использования.
gulp-imacss — очень удобная утилита, которая автоматически преобразовывает подключенные в CSS изображения PNG, JPG, SVG в Data URI.
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 — помогает правильно описать зависимости.
Современная сборка 2020 для frontend. Gulp4
Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.
Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить.
Поехали!
Начнем с главного в нашей сборке.
С pipe можно выстраивать любые цепочки.
Как вы заметили, в примерах я экспортировал функции, в старом API использовали gulp.task() :
Экспортирование функций позволяет разделять на публичные и приватные задачи.
Более подробная информация здесь, здесь и здесь.
Структура проекта
Если они не установлены, следуйте инструкциям здесь.
Создадим три папки:
Первые шаги
У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода.
Все наши проблемы решает Pug. Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют.
Новичкам советую обратить внимание еще на несколько возможностей:
Разделяем HTML
Разберем все более подробно.
Пройдемся по файлам:
Еще, обратите внимание, у pug есть комментарии, которые попадают в html и которые нет. Подробнее здесь.
Автоматизируем первую задачу
Последний плагин gulp-html-bem-validator — самописный плагин, сделал на скорую руку, потому что не смог найти аналогов. Очень маленький функционал, думаю, со временем буду улучшать.
Стили
Дальше мы добавим вспомогательные плагины: npm i gulp-autoprefixer gulp-shorthand gulp-clean-css gulp-sourcemaps stylelint gulp-stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-standard stylelint-config-htmlacademy
Пройдемся по каждому плагину:
В данной статье рассмотрим как компилировать SASS, объединять все файлы стилей в один и минифицировать css средствами Gulp.
require указывает, что надо проверить папку node_modules и найти там папку gulp.
Если такая имеется, то ее содержимое записывается в переменную gulp.
Научимся писать задачи.
Обычно, в задаче содержится два дополнительных метода Gulp и различные плагины.
Например:
Находясь в корне проекта, запускаем коммандную строку и вводим:
gulp hello
Удалим учебную задачу, и переходим к реальным.
И придумаем какие-нибудь стили для верхнего меню сайта:
В файле gulpfile.js добавляем переменную для плагина
Весь код gulpfile.js:
Запустим задачу в ком.строке командой gulp.
Но мы пишем код в scss на строке 5, кошмар, а что же будет дальше?
Для решения проблемы ставим плагин gulp-sourcemaps
https://www.npmjs.com/package/gulp-sourcemaps
В gulpfile.js добавляем вверху в секцию со всеми require еще одну переменную
Watch отслеживает изменения.
Но осталось еще одно неудобство, которое сильно раздражает. Каждый раз, когда мы меняем sass, приходиться перезапускать gulp.
Нам поможет замечательный метод watch().
Создадим еще одну задачу, назвем ее sass, поставим ее перед нашей задачей default и перенесем в нее все, что сейчас стоит внутри задачи default
набираем gulp sass в коммандной строке и жмем Enter.
Но я хочу запускать задачу sass как раньше, набрав просто gulp, без указания названия задачи.
Для этого в задачу default добавим массив с названием задачи sass.
Давайте для наглядности еще раз поменяем цвет:
$color: #0f0 и запустим gulp.
Обновляем браузер.
Отлично, все работает.
Добавим еще одну задачу, и назовем ее watch. Название задачи здесь значения не имеет, всю магию делает функция gulp.watch.
Копируем внутрь функции путь, который мы указывали sass и через запятую добавляем массив sass
Теперь watch будет смотреть, произошли ли какие-нибудь изменения в указанных файлах, и если да, то перезапускает задачу sass.
Запустим в коммандной строке gulp watch. Он запустится, но потом зависнет и будет чего-то ждать.
Поменяем в sass цвет еще раз, например опять на красный #f00 и обновим страницу. Все работает. Watch отследила изменения и перезапустила sass.
Чтобы остановить watch используйте сочетание клавиш Ctrl + C.
В корне проекта у нас есть папка src, где мы храним все наши исходники, для нее мы создали переменную srcDir,
а для всех sass файлов мы указали sassPattern.
Теперь исползуем переменные config.srcDir+’/’+config.sassPattern в нашем коде.
Ну и чтобы все запускалось одной коммандой, добавим в default после массива sass массив watch
Запустим gulp, чтобы удостовериться, что все прошло без ошибок.
Воспользуемся плагином gulp-concat https://github.com/contra/gulp-concat
Использовать его можно также и для js-файлов.
Установим его в наш проект. Ой, у нас работает watch, зажимаем Ctrl + C, вводим y и нажимаем Enter.
Пока NPM устанавливает файл, зайдем в gulpfile.gs и подключим плагин в секции require:
Функция gulp.src()загружает потоки многих файлов, а наша новая функция concat()объединяет эти потоки в один файл. Вот такая она минималистка.
Давайте сразу после пайпа sass поставим пайп concat и укажем имя объединенного файла стилей, пусть это будет main.css:
Теперь удалим все файлы из папки css, вернее удалим пока только три, с которыми мы экспериментируем. Это style.css, responsive.css и libs.css. Ох как мне мешают сейчас файлы стилей для плагина соц.сетей. Но что поделать, не обращаем на них внимания. Надеюсь, к следующей версии мы что-нибудь придумаем с соц.сетями.
В index.tpl в секции head удалим пути к этим файлам и укажем название нового файла стилей main.css.
Перезапускаем gulp
Теперь у нас один файл стилей, в котором собраны стили с файлов style, responsive и libs. И карта для файла main.css.
Перезапустим gulp. Теперь все нормально.
Минификация CSS.
Установим плагин gulp-clean-css.
https://github.com/scniro/gulp-clean-css.
Добавим переменнную в gulpfile.js
И добавляем в задачу sass после пайпа concat строку
Gulp — CSSO vs CLEAN-CSS?
Лучше всего — CSSNano. Помимо обычной минификации CSS, он использует и другие методики сокращения кода (к примеру, преобразование RGB- и RGBA-цветов в HEX-цвета, удаление ненужных значений свойств, сокращение имён анимации, объединение нескольких классов через запятую в случае одинаковых стилей, ну и кучу всего другого).
P. S. Работает с AutoPrefixer корректно (потому что тоже основан на PostCSS). Карты исходников тоже поддерживает.
UPDATE. Речь идёт именно о работе оригинального CSSNano (не gulp-cssnano) в связке с PostCSS для Gulp. Посмотрите комментарии других людей к моему ответу, там есть интересные вещи/аспекты касательно других подобных плагинов, которые вполне могут быть лучше, чем CSSNano.
И насколько медленно нано работает?
Зачем в 18 году использовать аутопрефиксер?
Autoprefixer надо, конечно, не тупо прогонять «last 20 versions», а настраивать его (+ оставлять функциональные комментарии для него в CSS-разметке). Transition’ы, конечно, префиксить не нужно, если нет цели поддержки древних браузеров.
NanoCSS работает быстро, если говорить на примере одного общего CSS размером как 100 Кб, так и 800+ Кб. Если куча мелких CSS (
90–100 штук) — примерно так же, как один.
100 файлов LESS в один CSS + Autoprefixer + NanoCSS = 4–5 секунд на Macbook Pro 15 (2017). Общий размер CSS после этого — около 400 Кб. LESS-логика не особо сложная.
Но опять же скорость зависит от многих условий. Бывает и быстрее сборка, бывает медленнее.
SmthTo,
0. Сколько лет назад браузеры ушли от префиксов?
Получается ради одного префикса тянется либа?
Мне не кажется ето нормальным
1. «Быстро» === я не успеваю переключиться на другой екран руками === 10Мб исходниках
sim3x, хм, ну ладно про префиксы. Этот спорная тема.
Но NanoCSS для PostCSS чем не угодил? Сжимает, убирает ненужные вещи, комментарии сокрашает цвета, градиенты, анимации и пр. Всё отлично.
CSS/LESS-исходники на 10 Мб — это уже слишком :))
SmthTo,
Разрабы браузеров уже давно решили данную «спорную тему»
Нет. В пределах нормы
sim3x, но вы не учитывает великий и могучий фактор пользователей, которые заходят на сайт даже с IE11, Safari 10 и т. п.
Исходники всякого разного могут быть и 30 МБ. Вот у меня лежат исходники стилей целого веб-приложения с кучей всего — около 8 Мб. Обычные сайты — это около 500 Кб CSS, так что вполне нормальный инструмент.
ProgerSoft, да, пробовал как раз с level 2 (последний, как помню), ещё комбинировал другие параметры, но остановился на NanoCSS, результаты получались лучше в плане уровня сжатия кода. В любом случае, нахожусь сейчас в поисках инструментов лучше, чем NanoCSS.
Единственная проблема, которую заметил у NanoCSS, это ошибка пирсинга свойства calc(80px + env(safe-area-inset-bottom)). Решилось обособлением env() скобками: calc(80px + (env(safe-area-inset-bottom)));
ProgerSoft, уверенность — понятие относительное, всегда рад ошибиться касательно технологии, иначе нет развития. Касательно NanoCSS был уверен не в плане скорости, а именно в результатах на выходе (сжатие, объединение и т. п.).
NanoCSS пока ничего ни разу не сломал, что случилось, к примеру, с CleanCSS, но вполне возможно, что это мои косые руки.
Вообще, вы весьма интересную тему подняли.
Сейчас товарищ sim3x прислал ссылку (первую) на сводную таблицу результатов, есть повод задуматься. Надо тестировать.
Самым лучшим справился gulp-cssnano, но я не понимаю, почему галп пакет справился лучше npm версии? Возможно вы знаете какие то опции для cssnano который еще больше минифицирует css (например объеденение селекторов и медия запросов)?
Вот результат моих тестировок: bit.ly/gulp-css-minify-plugins
В папке done-css находятся папки с названиями пакетов для минификации (да они не очень правильно названы, но поймете). В каждом из них находятся два файла. all.css и o.css. В all.css находятся мои написанные минифицированные стили. В o.css мои стили + normalize.css + bootstrap.css. В папке css находятся не минифицированные all.css и o.css.
P. S. В папке gulp-clean-css-level2 находятся файлы с минифицированием clean-css с level 2, а в папке gulp-clean-css опция level 2 не установлена.
Прошу прощения, gulp-clean-css с level 2 не только находит media запросы, но и объеденяет. Я просто неправильно медиа запросы писал 🙁
Самые лучшие результаты у gulp-cssnano gulp-clear-css с level 2 gulp-csso и cssnano
ProgerSoft, у меня CleanCSS иногда ломал вложенные media-запросы. Но, возможно, дело исключительно в конфигурации.
CSSNano использую в стандартной конфигурации, если говорить не о Gulp-версии. Вполне возможно, у Gulp-версии CSSNano другая конфигурация, более агрессивная, поэтому сжимает она лучше.
Спасибо за результаты и тестирование, сегодня посмотрю!
