Самые нужные плагины для 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, которая делает приблизительно следующее:

    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 — помогает правильно описать зависимости.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 30

      +4
      Вообще, странно, что в конце статьи «Самые нужные плагины для Gulp» приведен довольно объемный список плагинов для Grunt. Так задумано?
        0
        Пардон, забыл оформить как следует. Это как раз те крутые плагины, которые есть под Grunt, но нет под Gulp
        0
        Интересно, вчера только думал про конвертировании шаблонов в angular jst и тут на тебе — gulp-angular-templatecache
          +2
          Отличная шпаргалка, спасибо. Внес свою лепту на гитхабе.
            0
            И вам спасибо за инициативу, смержил
            –7
            У вас во время неаккуратной копипасты (окей, перевода) отвалилась часть ссылок и повылазили лишние <code>.
            По-моему, этому посту не хватает немного уважения к Хабру и его читателям.
              +6
              Ну та самая копипаста тоже моя. И пишу я сначала на русском. Уважение к Хабру и его читателям у меня безгранично. Не хватило внимательности. Для меня было не просто, перебрать почти две сотни не дублирующихся и самое главное полезных плагинов для Grunt и Gulp, и написать без ошибок все на русском, английском в Markdown и HTML. Но признаюсь, я сам по себе не очень внимательный. Всегда борюсь с этим. В данном случае проиграл :)
                0
                Про полезность коллекций плагинов в отрыве от задач я уже в прошлый раз высказался — здесь та же история.
              +1
              К gulp-rev хорошо бы приписать gulp-rev-collector, который позволяет использовать манифест-файл(ы) gulp-rev для поиска ссылок на ассеты в шаблонах и замены их на аналоги с приписанным номером ревизии. Проще говоря в шаблоне пишем /css/index.css, a он заменит это на /css/index-71543b2c.css во всех шаблонах по указанному пути.
                +1
                Простите право, но как вы могли забыть о gulp-rigger?
                  0
                  И так-же gulp-sourcemap
                    +1
                    Извиняюсь за вопрос, а вы можете подсказать что он именно делает?
                      0
                      Sourcemap в представлениях не нуждается, особо удобен при работе например с browserify. А gulp-rigger это как вы догадались просто обертка для rigger который позволяет вклеивать или включать кусочки одних файлов в другие.
                    +4
                    Некоторые плагины из подборки в статусе deprecated: gulp-clean, gulp-plato, gulp-bower-files

                    gulp-uncss — у вас ссылка не на тот плагин, на gulp-uncss-task, который тоже deprecated

                    gulp-copy — плагин сомнительной полезности, копировать файлы гулп умеет из коробки.

                    gulp-express — запускает не только Express.js сервер, а вообще любой
                      0
                      Спасибо большое за коммент. Uncss исправил, а вот по поводу Copy есть вопрос. Также из коробки работает gulp-requirejs и gulp-browserify как оказалось (просто сам я привык к grunt). Дак вот, все эти плагины мне просто удалить или как их посоветуете выделить, что они работают из коробки?
                        0
                        gulp-copy не нужен, потому что gulp умеет выполнять задачи без трансформации, как
                        gulp.src('./source/js/**/*.*', {base: './source'})
                          .pipe(gulp.dest('./dist')) //скопирует папку js из source в dist
                          .pipe(gulp.dest('./deploy')); //можно использовать несколько раз
                        


                        По поводу requirejs и browserify, вот что говорится в руководстве для написания плагинов
                        Your plugin should not do something that can be done easily with an existing node module
                        Wrapping every possible thing just for the sake of wrapping it will pollute the ecosystem with low quality plugins that don't make sense within the gulp paradigm.

                        Плагин не должен делать то, что легко делается существующим node модулем
                        Оборачивание всего подряд ради обертки загрязняет екосистему плагинами низкого качества, что противоречит парадигме gulp

                        Так что да, не нужны
                        gulp-requirejs — простая обертка
                        gulp-browserify — не поддерживается, вместо этого сам дает ссылку на рецепты, где способ запуска browserify для gulp
                      +1
                      В качестве grunt-html-build можно использовать gulp-html-replace.
                        –1
                        Сразу видно, автор ничего не использовал на практике. gulp-htmlmin — плохой плагин, вы с ним даже распространенные библиотеки (типа angularStrap) не скомпилите. И хорошо было бы сперва в этот списочек заглянуть github.com/gulpjs/plugins/blob/master/src/blackList.json
                          +1
                          Прямо таки ничего?

                          Конечно же я не все использовал, но не думаю, что это для кого окажется новостью. Про blackList уже уже в курсе, сам не знал про него. В большинстве случаев работаю с Grunt. Скоро внесу все правки.
                            0
                            Пользуясь случаем, хочу попросить рекомендации, чем оптимизировать Handlebars тимплейты. Пробовал разными html-минификаторами, но они все равно оставляют ненужные переносы строк, от которых плывет разметка.
                              0
                              Эммм… а не лучше их прекомпилировать и жать js минификатором? Зачем оставлять исходный шаблон, когда можно его сразу компилировать?
                                0
                                Тимплейты итак компилируются. Проблема в том, что компилированый тимплейт, это по сути тот же html, представленный в виде строк, с обвязкой необходимой логики. И эти строки — они содержат очень много мусора. Поэтому перед тем, как скормить тимплейт прекомпилятору, необходимо его почистить.
                            +1
                            По поводу shorthand, его можно интегрировать с gulp, например так:

                            var through2 = require('through2');
                            var shrthnd = require('shrthnd');
                            
                            .pipe(through2.obj(function (file, enc, next) {
                                var contents = file.contents.toString();
                                var res = shrthnd(contents).string;
                                console.log(file.path + ": shrthnd saved " + (contents.length - res.length) + " bytes");
                                file.contents = new Buffer(res);
                                next(null, file);
                            }))
                            
                            0
                            а может кто подскажет как подружить gulp-less, gulp-sourcemaps и gulp-autoprefixer?
                              0
                              Для Stylus у меня сделано так (думаю можно легко переделать для Less).
                              gulp.src([paths.src + "/app/index.styl", paths.src + "/app/vendor.styl"])
                                .pipe($.plumber({
                                  errorHandler: $.notify.onError("Error: <%= error.message %>")
                                }))
                                .pipe($.sourcemaps.init())
                                .pipe($.stylus({
                                  use: [nib()],
                                  compress: true
                                }))
                                .pipe($.autoprefixer({
                                  browsers: ['last 2 versions', 'ie 9']
                                }))
                                .pipe($.sourcemaps.write())
                                .pipe(gulp.dest(paths.tmp + "/serve/app/"))
                              

                              Для загрузки плагинов используется gulp-load-plugins
                              0
                              gulp-release кстати просто пустой файл
                              gulp-clean — deprecated, рекомендовано использовать rimraf, типа:

                              var rimraf = require('rimraf');
                              
                              gulp.task('clean', function(cb){
                                rimraf('./dist', cb);
                              });
                              
                              +1
                              gulp-grunt — we need to go deeper

                              Only users with full accounts can post comments. Log in, please.