Gulp плагины: Самые нужные плагины для Gulp / Хабр

Содержание

Gulp — Полезные плагины — CoderLessons.com

Gulp предоставляет несколько полезных плагинов для работы с HTML и CSS, JavaScript, графикой и некоторыми другими вещами, как описано в следующих таблицах.

HTML & CSS плагины

Sr.No.	Плагин и описание
1	autoprefixer Он автоматически включает префиксы к свойствам CSS.
2	глотка-браузер-синхронизация Он используется для просмотра всех файлов HTML и CSS в каталоге CSS и выполняет прямую перезагрузку страницы во всех браузерах при каждом изменении файлов.
3	Глоток-useref Он используется для замены ссылок на неоптимизированные скрипты или таблицы стилей.
4	Глоток-электронный дизайн Он создает шаблоны электронной почты в формате HTML, которые преобразуют стили CSS во встроенные.
5	проглатывать-uncss Он оптимизирует CSS-файлы и находит неиспользуемые и дублированные стили.
6	Глоток-csso Это оптимизатор CSS, который минимизирует CSS-файлы, что приводит к меньшему размеру файла.
7	Глоток-htmlmin Это минимизирует файлы HTML.
8	Глоток-csscomb Он используется для создания стиля для CSS.
9	Глоток-csslint Указывает CSS-линтер.
10	Глоток-htmlhint Он определяет валидатор HTML.

Он автоматически включает префиксы к свойствам CSS.

Он используется для просмотра всех файлов HTML и CSS в каталоге CSS и выполняет прямую перезагрузку страницы во всех браузерах при каждом изменении файлов.

Он используется для замены ссылок на неоптимизированные скрипты или таблицы стилей.

Он создает шаблоны электронной почты в формате HTML, которые преобразуют стили CSS во встроенные.

Он оптимизирует CSS-файлы и находит неиспользуемые и дублированные стили.

Это оптимизатор CSS, который минимизирует CSS-файлы, что приводит к меньшему размеру файла.

Это минимизирует файлы HTML.

Он используется для создания стиля для CSS.

Указывает CSS-линтер.

Он определяет валидатор HTML.

Плагины JavaScript

Sr.No.	Плагин и описание
1	Глоток-autopolyfiller Это то же самое, что autoprefixer, который включает в себя необходимые полифилы для JavaScript.
2	Глоток-jsfmt Он используется для поиска определенных фрагментов кода.
3	проглатывать-акционерные общества Используется для проверки стиля кода JavaScript.
4	Глоток-Modernizr Он указывает, какие функции HTML, CSS и JavaScript может предложить браузер пользователя.
5	глотка-экспресс Запускает веб-сервер gulp express.js.
6	проглатывать-requirejs Он использует require.js, чтобы объединить модули AMD require.js в один файл.
7	Глоток-Plato Он генерирует отчеты анализа сложности.
8	Глоток-сложность Он анализирует сложность и ремонтопригодность кода.
9	fixmyjs Это исправляет результаты JSHint.
10	Глоток-jscpd Он используется в качестве детектора копирования / вставки для исходного кода.
11	Глоток-jsonlint Это валидатор JSON.
12	проглатывать-уродовать Это минимизирует файлы JavaScript.
13	Глоток-CONCAT Он объединяет файлы CSS.

Это то же самое, что autoprefixer, который включает в себя необходимые полифилы для JavaScript.

Он используется для поиска определенных фрагментов кода.

Используется для проверки стиля кода JavaScript.

Он указывает, какие функции HTML, CSS и JavaScript может предложить браузер пользователя.

Запускает веб-сервер gulp express.js.

Он использует require.js, чтобы объединить модули AMD require.js в один файл.

Он генерирует отчеты анализа сложности.

Он анализирует сложность и ремонтопригодность кода.

Это исправляет результаты JSHint.

Он используется в качестве детектора копирования / вставки для исходного кода.

Это валидатор JSON.

Это минимизирует файлы JavaScript.

Он объединяет файлы CSS.

Модульные тесты Плагины

Sr.No.	Плагин и описание
1	Глоток-nodeunit Он запускает модульные тесты узлов из Gulp.
2	Глоток-жасмин Он используется для сообщения о проблемах, связанных с выходом.
3	Глоток-QUnit Он обеспечивает базовый вывод консоли для тестов QUnit и использует модуль узла PhantomJS и подключаемый модуль PhnomJS для запуска.
4	Глоток-мокко Он определяет тонкую оболочку вокруг Мокки и запускает тесты Мокки.
5	Глоток-карма Это было объявлено устаревшим в Gulp.

Он запускает модульные тесты узлов из Gulp.

Он используется для сообщения о проблемах, связанных с выходом.

Он обеспечивает базовый вывод консоли для тестов QUnit и использует модуль узла PhantomJS и подключаемый модуль PhnomJS для запуска.

Он определяет тонкую оболочку вокруг Мокки и запускает тесты Мокки.

Это было объявлено устаревшим в Gulp.

Графические плагины

Sr. No.	Плагин и описание
1	gulpicon Он генерирует спрайты из SVG и конвертирует их в PNG.
2	Глоток-iconfont Он используется с веб-шрифтами для создания файлов WOFF, EOT, TTF из SVG.
3	Глоток-imacss Он преобразует файлы изображений в URI данных и помещает их в один файл CSS.
4	глоток реагирующим Он генерирует адаптивные изображения для разных устройств
5	проглатывать острые Он используется для изменения и изменения размера ориентации и фона изображения.
6	Глоток-svgstore Он объединяет файлы SVG в один с элементами <symbol>.
7	gulp-imagemin & gulp-tinypng Он используется для сжатия изображений, таких как PNG, JPEG, GIF, SVG.
8	Глоток-spritesmith Он используется для создания таблицы спрайтов из набора изображений и переменных CSS.

Он генерирует спрайты из SVG и конвертирует их в PNG.

Он используется с веб-шрифтами для создания файлов WOFF, EOT, TTF из SVG.

Он преобразует файлы изображений в URI данных и помещает их в один файл CSS.

Он генерирует адаптивные изображения для разных устройств

Он используется для изменения и изменения размера ориентации и фона изображения.

Он объединяет файлы SVG в один с элементами <symbol>.

Он используется для сжатия изображений, таких как PNG, JPEG, GIF, SVG.

Он используется для создания таблицы спрайтов из набора изображений и переменных CSS.

Компиляторы Плагины

Sr.No.	Плагин и описание
1	глоток меньше Он предоставляет LESS плагин для Gulp.
2	Глоток-дерзость Он предоставляет плагин SASS для Gulp.
3	Глоток компас Он предоставляет компас плагин для Gulp.
4	Глоток-стилус Используется для хранения стилуса в CSS.
5	Глоток кофе- Он предоставляет плагин coffeescript для Gulp.
6	проглатывать-рули Он предоставляет плагин руля для Gulp.
7	проглатывать-Jst Он предоставляет шаблоны подчеркивания в JST.
8	проглатывать реагируют Он определяет шаблоны JSX Facebook React в JavaScript.
9	проглатывать-nunjucks Он определяет шаблоны Nunjucks в JST.
10	проглатывать-dustjs Он определяет шаблоны пыли в JST.
11	глотка-угловой-templatecache Он определяет шаблоны AngularJS в templateCache.

Он предоставляет LESS плагин для Gulp.

Он предоставляет плагин SASS для Gulp.

Он предоставляет компас плагин для Gulp.

Используется для хранения стилуса в CSS.

Он предоставляет плагин coffeescript для Gulp.

Он предоставляет плагин руля для Gulp.

Он предоставляет шаблоны подчеркивания в JST.

Он определяет шаблоны JSX Facebook React в JavaScript.

Он определяет шаблоны Nunjucks в JST.

Он определяет шаблоны пыли в JST.

Он определяет шаблоны AngularJS в templateCache.

Другие плагины

Плагин gulp-clean удаляет файлы и папки, а плагин gulp-copy копирует файлы из источника в новое место назначения.

Он запускает задания Grunt из Gulp

Он просматривает файлы всякий раз, когда вносятся изменения.

Он уведомляет об ошибке каждый раз при сбое задачи.

Это позволяет использовать команды Git.

Он создает документацию JavaScript для Gulp.

Он обеспечивает пересмотр статического ресурса для имен файлов.

Увеличивает версии в пакете JSON.

Это используется, чтобы ввести пакеты беседки.

Удаляет операторы console.log.

Он предварительно обрабатывает HTML, JavaScript и другие файлы на основе контекста или конфигурации среды.

Указывает продолжительность для задач Gulp.

Он запускает измененные файлы и новые файлы.

Он используется для запуска веб-сервера с LiveReload.

Он запускает команды Shell.

Соединяется с помощью задач SSH и SFTP.

Он сжимает файлы и папки.

Он определяет размер файла в удобочитаемом формате.

Он предоставляет утилиты для плагинов gulp.

gulp plugins.. · GitHub

gulp plugins..

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

	—Shell it
	Terminal web storm:
	npm init
	npm i gulp
	npm i gulp-sass
	npm i gulp-pug —save-dev
	npm i browser-sync —save-dev
	Создана файловая структура
	Настройка js в gulp
	npm i -g bower
	в папке проекта add файл . bowerrc
	{ «directory» : «app/libs/» }
	тест
	установка jquery и popup — bower i jquery magnific-popup
	установка плагинов для сбора и минификации js
	npm i —save-dev gulp-concat gulp-uglifyjs
	Модификация gulpfile
	var concat, uglify;
	Минификация
	npm i gulp-cssnano gulp-rename —save-dev
	таск для сборки и сжатия всех библиотек
	создание файла libs. sass и импорт подключенных к нему библиотек
	Установим и подключим пакет del:
	npm i del —save-dev
	production
	Оптимизация изображений
	npm i gulp-imagemin imagemin-pngquant —save-dev
	Подключение кэша
	npm i gulp-cache —save-dev
	Автоматическое создание префиксов CSS
	npm i —save-dev gulp-autoprefixer


	git status
	git add .
	git commit -m «»


	связь с гит
	—
	gulp-sass
	gulp-pug
	browser-sync
	gulp-concat
	gulp-uglifyjs
	del
	gulp-imagemin
	imagemin-pngquant
	gulp-cache
	gulp-autoprefixer

16 потрясающих gulp-плагинов, которые улучшат ваш рабочий процесс

Раньше я был из тех людей, которые просто пишут код, а затем загружают его на веб-сервер. Теперь я знаю ошибку своего пути, процесс сборки действительно может помочь либо уменьшить вашу рабочую нагрузку (если вы уже делаете что-то вручную), либо даже лучше автоматизировать то, о чем вы даже не думали (или не знали), что вам нужно.

Для этого я обычно использую Gulp. Этот инструмент позволяет объединить процесс сборки. Итак, позвольте мне привести вам пример: вы хотите минимизировать все файлы, создать исходные карты вашего CSS и JS, создать новые номера версий для ваших активов, сжать изображения, создать свои значки и т. д. Все это и многое другое можно сделать в одна команда с использованием gulp-плагины .

Итак, я решил рассказать о некоторых из плагинов Gulp , которые я использую в процессе сборки. Я разделю их по стилям, сценариям, html и т. д.

Стили

gulp-sass

Этот плагин компилирует ваш SASS в файл CSS. (Если вы не догадались по названию). Это очень полезно, так как вы можете написать свои стили в sass, и это скомпилирует их в CSS. Это может быть либо на лету с синхронизацией браузера (мы поговорим об этом позже), либо когда вы создаете окончательный проект.

gulp-cssnano

Этот плагин позволяет минимизировать ваш CSS в процессе сборки. Минификация позволяет уменьшить размер файла, удаляя пробелы и разрывы строк, обновляя имена переменных, делая их короче, удаляя комментарии и изменяя некоторые функции, чтобы сделать их менее читаемыми. (Например, изменение логического значения false на !1).

критический

Это генерирует ваш критический CSS из вашего CSS и добавляет его в раздел. Если вам нужны советы о том, как улучшить скорость страницы. Я говорил об этом в предыдущем сообщении в блоге.

autoprefixer

Этот плагин — один из моих любимых. Он добавляет префиксы для конкретного браузера, поэтому вам не нужно это делать. Так, например, используя CSS «border-radius», вы также можете включить «-webkit-border-radius», ваш процесс сборки gulp добавит это за вас.

Скрипты

gulp-uglify

Это очень похоже на gulp-cssnano, но используется для JS. Он минимизирует ваши скрипты, чтобы ускорить работу PLS, и сократить время выполнения.

глоток-эслинт

Этот плагин проверяет ваш JS, ищет любые ошибки, ищет любые неиспользуемые переменные или аргументы. Он также может исправить любые проблемы, если вы этого хотите. Существуют также различные плагины ESLint, которые также могут обнаруживать проблемы с библиотеками. В приведенном ниже примере показано приложение AngularJS.

Пример вывода ESLint

HTML

gulp-useref

Этот плагин объединяет любые скрипты или наборы стилей. Это помогает, если вы используете HTTP/1.1, так как быстрее загрузить 1 файл, чем несколько. По мере перехода к HTTP/2 это становится менее актуальным.

gulp-htmlmin

Подобно gulp-cssnano или gulp-uglify, это минимизирует ваш HTML. (Если вы еще не догадались) Существуют различные варианты, которые вы можете использовать и для этого, которые могут сделать его более агрессивным. Например, удаление кавычек там, где они не нужны.

Перед запуском gulp-htmlmin

После запуска gulp-htmlmin

Как видите, в этом маленьком файле удалены разрывы строк, пробелы и кавычки вокруг любых атрибутов отдельных слов.

Изображения

gulp-imagemin

Этот плагин минимизирует любые изображения, используемые в проекте. Обычно это достигается за счет удаления некоторого качества из JPEG, удаления любых неиспользуемых строк кода из SVG и т. д. Это может помочь уменьшить размер всех используемых изображений без утомительной задачи делать это вручную.

Другие плагины Gulp

browsersync

Browersync позволяет предварительно просмотреть ваш сайт, он отлично подходит для разработки, поскольку он подстраивает его под вас. Вот несколько преимуществ использования синхронизации браузера в процессе разработки:

Когда вы сохраняете файлы, ваш сайт перезагружается.
Синхронизируйте 2 браузера друг с другом (я считаю, что это особенно полезно при работе с настольным компьютером и мобильным сайтом). Это работает как для взаимодействия, так и для прокрутки и навигации.
Проверьте свой сайт в различных условиях сети

gulp-load-plugins

Это очень просто, оно позволяет вам вставлять любые плагины с префиксом gulp в ваш Gulpfile, поэтому вам не нужно иметь их все включены. Затем вы можете использовать плагины с помощью объекта или по вашему выбору.

gulp-rev

Этот плагин добавляет хэши в конец имен файлов статических ресурсов. Это полезно, особенно если вы хотите быть агрессивным с кэшированием на вашем сервере. Вы можете установить дату истечения срока действия далеко в будущем для вашего CSS и JS. Затем, если будут сделаны какие-либо изменения, они будут иметь другое имя файла, который, в свою очередь, будет иметь длинный кеш. Это сделает ваш веб-сайт или приложение быстрее, потому что ваши пользователи смогут кэшировать основные активы. Например, app.js может измениться на приложение-2f6e8c0f32.js . Если сохранить как app.js, это может вызвать проблемы с кэшированием JS пользователями и запуском устаревшего JS.

gulp-cdnizer

Я считаю этот плагин полезным, поскольку стараюсь использовать CDN, где это возможно, для любых используемых библиотек. Он позволяет заменить любые локальные библиотеки эквивалентом CDN. Поэтому я бы использовал это для таких библиотек, как AngularJS. У меня была бы локальная версия для работы при разработке, которая была бы не минимизирована. При сборке для производства я запускал эту библиотеку через gulp-cdnizer и менял ее на уменьшенную версию на CDNJS в производстве.

gulp-replace

gulp-replace — это очень простой плагин, который берет строку и заменяет ее другой. Я использую это для замены комментария в HTML на критический CSS. Большинству проектов он может не понадобиться, но знать о нем полезно, если он вам нужен!

gulp-flatten

gulp-flatten поможет вам создать дерево, которое вы хотите для ваших файлов. Это особенно полезно, если вы хотите, чтобы файлы определенных типов находились в одном месте. Одним из вариантов использования будет структурирование ваших компонентов беседки. Вместо того, чтобы иметь дерево по умолчанию, которое может выглядеть примерно так:

До использования gulp-flatten плагина gulp

Это может выглядеть примерно так:

После использования gulp-flatten

Это упрощает размещение файлов в повторяемом месте, а не в той папке, в которой они находятся по умолчанию.

gulp-sourcemaps

Этот плагин позволяет создавать исходные карты для вашего CSS и JS. Карты исходного кода позволяют отлаживать ваш сайт в рабочей среде, предоставляя способ показать, как будет выглядеть файл, без минимизации и комбинации. Этот плагин gulp будет генерировать их, а затем ссылаться на них в соответствующих файлах.

Заключение

Есть много других плагинов. В зависимости от вашего рабочего процесса вы можете удалить или добавить некоторые плагины. Существует плагин практически для любой задачи, которую вы хотите автоматизировать. Например, есть некоторые для создания избранных значков.

Плагины Gulp и отлично справляются с небольшими задачами, поэтому вам не нужно этого делать. Вышеуказанные плагины помогают улучшить ваш рабочий процесс и могут запускаться различными способами. Обычно у меня есть процесс сборки для окончательной сборки, другой для разработки с использованием синхронизации с браузером и т. д. и один для тестирования.

Использование плагинов Gulp.js для анализа JavaScript — Gulp.js 3.9 — ПРОМЕЖУТОЧНЫЙ

Gulp.js 3.9 | Средний

15 Видео | 59м 44с
Получает значок

Узнайте, как работать с Gulp. js! Давайте посмотрим, как вы можете использовать плагины Gulp.js, чтобы помочь вам в анализе вашего кода JavaScript, а также в компиляции и оптимизации файлов CSS.

ЧТО ВЫ УЗНАЕТЕ

описывает назначение подключаемых модулей JSHint и JSCS для выполнения анализа кода на основе JavaScript
установить и настроить плагины Gulp JSHint и JSCS для линтинга JavaScript и проверки стиля кода
создать код для задач JSHint и JSCS в Gulp
установить и использовать подключаемый модуль Gulp concat для объединения нескольких файлов в один
установить отдельные плагины Gulp, а также использовать отложенную загрузку для загрузки всех плагинов Gulp
установите и используйте плагин Gulp uglify для минимизации кода JavaScript
создание и работа с многократно используемым файлом конфигурации в Gulp
установите и используйте плагин Gulp SASS для компиляции кода CSS
установите и работайте с плагином автопрефиксера Gulp, чтобы добавить префиксы поставщиков в код CSS
установите и используйте плагин Gulp csslint для обнаружения проблем в коде CSS
установите и используйте плагин Gulp uncss для оптимизации кода CSS
установите и используйте плагин Gulp csso, чтобы удалить все ненужные символы из кода CSS
работайте с методом ошибки в Gulp для обработки ошибок в коде CSS
Установите инструмент Gulp Plumper и работайте с ним для обработки ошибок в коде CSS
определяет API Gulp и основные плагины, используемые для работы с кодом JavaScript и CSS

В ЭТОМ КУРСЕ

Играбельный
1.
JSHint и JSCS
3 м 57 с
ВВЕРХ СЛЕДУЮЩИЙ
Играбельно
2.
Установка JSHint и JSCS
2м 6с
Заблокировано
3.
Задачи кодирования с помощью JSHint и JSCS
4м 5с
Заблокировано
4.
Объединение файлов
3 м 45 с
Заблокировано
5.
Загрузка плагинов Gulp
3м 33с
Заблокировано
6.
Минификация JavaScript
2 м 50 с
Заблокировано
7.
Создание модуля конфигурации
5 м 40 с
Заблокировано
8.
Использование компилятора SASS
2 м 35 с
Заблокировано
9.
Использование подключаемого модуля AutoPrefixer
4м 26с
Заблокировано
10.
CSS Linting
4 м 57 с
Заблокировано
11.
Оптимизация CSS
5м 3с
Заблокировано
12.
Минификация CSS
3 м 37 с
Заблокировано
13.
Добавление обработки ошибок
5м 20с
Заблокировано
14.
Обработка ошибок с помощью Gulp Plumber
4м 27с
Заблокировано
15.