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

Что такое плагины Gulp

Базовый функционал Gulp достаточно ограничен. По сути, Gulp умеет просто брать какие-то файлы, определять их точку входа, определять точку выхода и соответственно копировать эти файлы.

Если мы с вами хотим, чтобы Gulp умел делать еще что-то дополнительно, базовым функционалом здесь не обойтись. Система Gulp разрабатывалась модульно. У нее есть так называемые модули или их ещё называют плагинами

Это некие расширения, которые мы можем добавить внутрь нашего Gulp и, соответственно, научить эту систему делать какой-то определенный набор действий. 

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

Существует достаточно много плагинов. Они постоянно добавляются. Мы можем как-то с ними работать. 

В зависимости от того, какая у нас задача, мы можем найти какой-то плагин, который может решить эту задачу. Например, нам нужно решить задачу обработки sass файлов, мы можем набрать здесь sass и посмотреть какие решения у нас здесь есть. 

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

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

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

Что такое плагины Gulp, где и как их искать мы рассмотрели. А в следующем видео мы уже посмотрим на практике, как мы можем установить тот или иной Gulp плагин и как можно подключить его к нашему проекту.

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

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

HTML & CSS плагины

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

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

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

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

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

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

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

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

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

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

Плагины JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Он предоставляет 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 плагины и их установка в проект

var gulp       = require(‘gulp’), // Подключаем Gulp

sass         = require(‘gulp-sass’), //Подключаем Sass пакет

browserSync  = require(‘browser-sync’), // Подключаем Browser Sync

concat       = require(‘gulp-concat’), // Подключаем gulp-concat (для конкатенации файлов)

uglify       = require(‘gulp-uglifyjs’), // Подключаем gulp-uglifyjs (для сжатия JS)

cssnano      = require(‘gulp-cssnano’), // Подключаем пакет для минификации CSS

rename       = require(‘gulp-rename’), // Подключаем библиотеку для переименования файлов

del          = require(‘del’), // Подключаем библиотеку для удаления файлов и папок

imagemin     = require(‘gulp-imagemin’), // Подключаем библиотеку для работы с изображениями

pngquant     = require(‘imagemin-pngquant’), // Подключаем библиотеку для работы с png

cache        = require(‘gulp-cache’), // Подключаем библиотеку кеширования

autoprefixer = require(‘gulp-autoprefixer’);// Подключаем библиотеку для автоматического добавления префиксов

gulp.task(‘sass’, function(){ // Создаем таск Sass

return gulp.src(‘app/sass/**/*.sass’) // Берем источник

.pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass

.pipe(autoprefixer([‘last 15 versions’, ‘&gt; 1%’, ‘ie 8’, ‘ie 7’], { cascade: true })) // Создаем префиксы

.pipe(gulp.dest(‘app/css’)) // Выгружаем результата в папку app/css

.pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении

});

gulp.task(‘browser-sync’, function() { // Создаем таск browser-sync

browserSync({ // Выполняем browserSync

server: { // Определяем параметры сервера

baseDir: ‘app’ // Директория для сервера — app

},

notify: false // Отключаем уведомления

});

});

gulp.task(‘scripts’, function() {

return gulp.src([ // Берем все необходимые библиотеки

‘app/libs/jquery/dist/jquery.min.js’, // Берем jQuery

‘app/libs/magnific-popup/dist/jquery.magnific-popup.min.js’ // Берем Magnific Popup

])

.pipe(concat(‘libs.min.js’)) // Собираем их в кучу в новом файле libs.min.js

.pipe(uglify()) // Сжимаем JS файл

.pipe(gulp.dest(‘app/js’)); // Выгружаем в папку app/js

});

gulp.task(‘css-libs’, [‘sass’], function() {

return gulp.src(‘app/css/libs.css’) // Выбираем файл для минификации

.pipe(cssnano()) // Сжимаем

.pipe(rename({suffix: ‘.min’})) // Добавляем суффикс .min

.pipe(gulp.dest(‘app/css’)); // Выгружаем в папку app/css

});

gulp.task(‘watch’, [‘browser-sync’, ‘css-libs’, ‘scripts’], function() {

gulp.watch(‘app/sass/**/*.sass’, [‘sass’]); // Наблюдение за sass файлами в папке sass

gulp.watch(‘app/*.html’, browserSync.reload); // Наблюдение за HTML файлами в корне проекта

gulp.watch(‘app/js/**/*.js’, browserSync.reload);   // Наблюдение за JS файлами в папке js

});

gulp.task(‘clean’, function() {

return del.sync(‘dist’); // Удаляем папку dist перед сборкой

});

gulp.task(‘img’, function() {

return gulp.src(‘app/img/**/*’) // Берем все изображения из app

.pipe(cache(imagemin({  // Сжимаем их с наилучшими настройками с учетом кеширования

interlaced: true,

progressive: true,

svgoPlugins: [{removeViewBox: false}],

use: [pngquant()]

})))

.pipe(gulp.dest(‘dist/img’)); // Выгружаем на продакшен

});

gulp.task(‘build’, [‘clean’, ‘img’, ‘sass’, ‘scripts’], function() {

var buildCss = gulp.src([ // Переносим библиотеки в продакшен

‘app/css/main.css’,

‘app/css/libs.min.css’

])

.pipe(gulp.dest(‘dist/css’))

var buildFonts = gulp.src(‘app/fonts/**/*’) // Переносим шрифты в продакшен

.pipe(gulp.dest(‘dist/fonts’))

var buildJs = gulp.src(‘app/js/**/*’) // Переносим скрипты в продакшен

.pipe(gulp.dest(‘dist/js’))

var buildHtml = gulp.src(‘app/*.html’) // Переносим HTML в продакшен

.pipe(gulp.dest(‘dist’));

});

gulp.task(‘clear’, function (callback) {

return cache.clearAll();

})

gulp.task(‘default’, [‘watch’]);

Современная сборка 2020 для frontend. Gulp4

Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.

Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно смотреть, когда заходят на онлайн-сервисы для конвертации scss, минификации javascript и других рутинных задач. Самое забавное — когда сделали мелкую правку, снова нужно проходить все круги ада копипаста.

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

Gulp

Начнем с главного в нашей сборке.

Gulp — это наш фундамент, потому что он будет управлять всеми нашими задачами, другими словами, taskmanager. Концепция задач очень проста. Название асинхронной javascript функции равно названию задачи, и работает она по принципу: берет данные, трансформирует их и записывает результат.

Пример минификации сss

Как видим, все просто: называем нашу задачу css, вызываем функцию src, которая берет данные по определенному шаблону и передает данные по трубе (функция pipe()). Внутри pipe вызываем функцию плагина, которая трансформирует наши данные и результат передает функцию dest. dest — записывает результат по указанному пути.

С pipe можно выстраивать любые цепочки.

Пример

В четвертой версии много чего изменилось, но на что нужно точно обратить внимание — это на gulp.series() и gulp.parallel(). Позже мы разберем параллельное выполнение задач.

Как вы заметили, в примерах я экспортировал функции, в старом API использовали gulp.task():

gulp.task('taskName',function() {
    //do somethings
})

Больше не рекомендуется использовать gulp.task().

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

• публичные задачи — экспортируются из вашего gulpfile, что позволяет запускать их командой gulp.
• приватные задачи — создаются для внутреннего использования, как правило, в составе series() или parallel()

Пару слов о шаблонах поиска файлов в функции src.

• templates/*.html — ищет файлы с расширением html в папке templates
• templates/**/*.html — ищет файлы с расширением html во всех папках, которые в templates

Более подробная информация здесь, здесь и здесь.

После того, как мы разобрались с фундаментом нашего проекта, начнем делать первые шаги. Проверяем, установлены ли node.js и npm.

Команды в консоли

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

Создаем папку для нашего проекта. Внутри инициализируем npm npm init --yes

Ключ --yes означает автоматические ответы вопрос по проекту.

Создадим три папки:

• build — оптимизированные файлы для использования на сервере
• src — рабочая папка, где будут храниться все наши исходники
• gulp — здесь будут храниться наши tasks

Еще добавим файл .gitignore, чтобы системные файлы не попадали в репозиторий.

Папка /build задокументирована, потому что часто использую GitHub Pages для демонстрации работы.

Не забудьте установить gulp: npm install --save-dev gulp

.gitignore

# Файлы и папки операционной системы
.DS_Store
Thumbs.db

# Файлы редактора
.idea
*.sublime*
.vscode

# Вспомогательные файлы
*.log*
node_modules/

# Папка с собранными файлами проекта
# build/

HTML

У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода.

Пример немного не реалистичный, но почти такое делают

Все наши проблемы решает Pug. Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют.

Пример базового функционала

Новичкам советую обратить внимание еще на несколько возможностей:

• Разделение на модули — удобно, когда используешь БЭМ: один блок — один файл. Подробнее.

Пример из документации

• Миксины — удобно использовать для однотипных блоков. Например, карточки товаров или комментариев. Подробнее.

Пример с документации

• Циклы для генерации однотипных блоков. Подробнее.

Пример с документации

За последнее время сильно ничего не изменилось, только название с Jade на Pug. Подробнее.

Разделяем HTML

На нашем сайте будут две тестовые страницы about и index. Структура на страницах повторяется: есть блоки <footer>, <header>, <head>. Поэтому все нужно вынести в отдельные файлы модули.

Структура проекта

Разберем все более подробно.

• pages — папка для наших страниц, где в корне хранятся непосредственно страницы
• common — хранятся общие блоки для всех страниц
• includes — хранятся модули страниц, где внутри еще одна папка, которая соответствует названию страницы

Пройдемся по файлам:

• layout.pug — шаблон, который хранит основную структуру, и от него наследуются все другие страницы

layout.pug

• index.pug и about.pug — наши страницы, которые наследуются от шаблона и подключают свои контентные модули

pages/index.pug и pages/about.pug

Еще, обратите внимание, у pug есть комментарии, которые попадают в html и которые нет. Подробнее здесь.

Установим плагин gulp-pug для компиляции наших шаблонов. Выполните в консоли команду: npm i gulp-pug

Создадим файл pug2html.js в папке gulp/tasks.

pug2html.js

Здесь все понятно: ищем файлы по указанному пути, компилируем и результат выгружаем в папку build. Еще добавим pug-linter, чтобы новички не косячили и сохраняли единый стиль написания кода. Для конфигурации создадим файл .pug-lint.json в корне проекта. Правила для линтера писал на свой вкус. Вы без проблем сможете изменить. Список правил.

Теперь подключаем нашу задачу в файле gulpfile.js.

gulpfile.js

Здесь мы создаем серию с одной таски с названием start; потом мы добавим ещё. Теперь в консоли выполните команду gulp start, и в папке build должны появиться два файла: index.html и about.html.

Еще добавим gulp-w3c-html-validator, чтобы не было нелепых ошибок. Вы, наверное, догадались, что порядок подключения плагинов c помощью pipe() очень важен. То есть перед тем, как вызвать плагин pug() для компиляции, нужно сделать валидацию плагином pugLinter(), а плагин gulp-w3c-html-validator подключаем после pug(), потому что нам нужно валидировать скомпилированный html.

Последний плагин gulp-html-bem-validator — самописный плагин, сделал на скорую руку, потому что не смог найти аналогов. Очень маленький функционал, думаю, со временем буду улучшать.

Пример работы плагина

Финальный код таски pug2html.js

Для стилей мы будем использовать Scss. Все дается по аналогии с задачей pug2html. Создаем новую папку styles и скачиваем нужные пакеты npm install node-sass gulp-sass --save-dev.

Дальше пишем задачу, как и делали раньше. Берем файлы, передаем в плагин и потом сохраняем результат.

tasks/styles.js

Дальше мы добавим вспомогательные плагины: 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

Пройдемся по каждому плагину:

• gulp-autoprefixer — автоматическая расстановка префиксов для старых браузеров.
• gulp-shorthand — сокращает стили.

Пример

• gulp-clean-css — минификация стилей
• gulp-sourcemaps — ответ на вопрос: «Что это такое и зачем нужно?»
• stylelint gulp-stylelint stylelint-scss — плагины для проверки наших стилей
• stylelint-config-htmlacademy stylelint-config-standard stylelint-config-standard-scss — готовые конфиги, которые мы подключили в свой конфиг

Файлы styles:

Структура папки styles

global.scss

media.scss

Немного обсудим файл media.scss. Есть два варианта организации медиа-запросов.

1. Писать медиа-запросы ко всему блоку в конце файла.
2. Писать медиа-запросы в самом селекторе, используя @mixin и @include.

Пример второго варианта

Я поклонник второго варианта, удобно, когда все стили в одном месте, и не нужно никуда скроллить и ничего искать.

Последний шаг: подключим normalize.css. Установим командой npm install normalize.css

и добавим @import "../../../node_modules/normalize.css/normalize"; в начале файла global.scss

Зачем нужен normalize.css?

Все делаем так же, как и с другими тасками, только подключаем другие плагины.

Установим сначала все необходимые зависимости npm i gulp-babel @babel/core @babel/preset-env --save-dev

и зависимости для eslint npm install eslint eslint-config-htmlacademy eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node --save-dev

• gulp-babel @babel/core @babel/preset-env — babel конвертирует ECMAScript 2015+ код в более старую версию

Пример

• gulp-terser — минификация и оптимизация javascript.

Задача script

• eslint — мы уже знаем, что делают линтеры. Решил подключить готовые конфиги, потому что очень много разных правил, чтобы все настраивать с нуля.

.eslintrc.json

Устанавливаем плагины npm i gulp-imageMinify gulp-svgstore

Для картинок используется банальный код, который вы уже на данном этапе без проблем можете понять.

Шрифты мы просто копируем.

Не вижу смысла объяснять, как делать svg спрайты, когда в интернете много статей. Вот одна из них.

Чтобы каждый раз не обновлять страницу при изменении файла, подключим browser-sync. У gulp есть встроенная функция, которая следит за изменениями и вызывает нужные нам функции. Советую зайти и почитать о возможностях browsersync. Мне очень нравится возможность открытия сайта и синхронизации прокрутки страницы на нескольких устройствах. Очень удобно верстать адаптивные сайты: открыл на компьютере, открыл на телефоне — и сразу видишь результат.

Наш локальный сервер. Задача serve

Бывает такое, что сделал опечатку, сохранил код и сборка падает с ошибкой. Нужно снова перезапускать сборку, и со временем это может начать раздражать, поэтому установим npm i gulp-plumber. Plumber будет перехватывать ошибки, и после устранения ошибки сборка восстановит работоспособность. Интегрировать его очень просто, добавляем его первым .pipe(plumber()) в наших трубопроводах цепочках pug2html и styles.

Во время разработки мы будем создавать и удалять файлы. Так как у нас live reload, то созданные файлы автоматически попадут в build. Когда чуть позже мы решим удалить файл, то он останется в папке build, поэтому сделаем еще одну задачу clean, которая будет удалять папку. Установим плагин npm install del. Del.

const del = require('del')

module.exports = function clean(cb) {
  return del('build').then(() => {
    cb()
  })
}

Главное — не забыть вызвать функцию-callback, которая сообщит gulp, что задача выполнена.

Lighthouse

Lighthouse — решение для веб-приложений и веб-страниц, которое собирает современные показатели производительности.

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

Вы можете возразить, зачем ради одной странички заморачиваться, но в реальных проектах их может быть больше 10.

Скрин с реального проекта

Устанавливаем npm i --save-dev gulp-connect lighthouse chrome-launcher и создаём задачу.

Результат для каждой странички будет генерироваться в папку ./reports. Там будут ‘html’ файлы, они открываются автоматически, но вы сами в любой момент можете их открыть и посмотреть результат.

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

lighthouse.js

Кода многовато, но он простой. Запустили наш локальный сервер с помощью browser-sync, потом хром и в конце lighthouse, где говорим, по какому url искать наш сайт.

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

gulp-npm-dist — очень хороший плагин, мне он нравится тем, что он не просто копирует всю папку модуля, а только нужные файлы. README.md, LICENSE, .gitignore и другие конфигурационные файлы не копируются.

Теперь сделаем, чтобы при изменении package.json вызывался плагин. Не вижу смысла сильно заморачиваться и следить только за изменениями объекта dependencies, поэтому будем просто следить за файлом.

Последняя оптимизация. Часто сложно и лень запоминать консольные команды, там много параметров, вводить все эти пути занимает время,

поэтому запишем длинные команды в более краткие команды.

Рассмотрим такую ситуацию: вы скопировали большой кусок кода с постороннего ресурса, и

он не соответствует вашим правилам форматирования.

Не будете же вы всё править руками? Можно просто в консоли ввести команду, которая все исправит

за вас stylelint ./src/styles/**/*.scss --fix --syntax scss, команда длинная, поэтому запишем ее в NPM-скрипт

Добавили NPM-скрипт

Как видим на скрине, теперь в консоли можно вводить npm run stylelint-fix.

Напишем еще несколько команд:

• npm run start — вместо gulp, привык, что любой проект у меня запускается этой командой
• npm run build — вместо gulp build, такая же ситуация, как в прошлом пункте
• npm run lighthouse — вместо gulp build && gulp lighthouse, сначала собираем проект, а потом уже тестируем
• npm run test — запуск разных линтеров, хорошей практикой будет запускать перед комитом

Не верю я, что вы будете перед комитом запускать npm run test, даже не верю, что я буду. Поэтому скачаем husky и добавим:

"husky": {
    "hooks": {
      "pre-commit": "npm run test"
    }
  }

в package.json. Если npm run test вернет ошибку, то комит не будет сделан.

Очень приятно, если вы прочли всю статью и сумели принять мои мысли. Отвечу на вопросы в комментариях и жду ваших pull requests и issue. Всем приятных сборок.

Ссылка на репозиторий с тем, что у нас получилось: github.

javascript — Установка плагинов Gulp локально против глобально

Я довольно новичок в Gulp и у меня есть вопрос: я должен установить плагины gulp (такие как gulp-sass или gulp-imagemin) локально или глобально? В примерах в Интернете люди в основном делают это локально (с опцией --save-dev). Как я понимаю, таким образом модули хранятся в локальной папке node_modules, добавляются в локальный package.json как devDependencies и на них можно ссылаться в локальном gulpfile.js через require(). Поэтому, если мне нужно установить те же модули для другого проекта, над которым я работаю, это можно сделать, скопировав package.json в папку нового проекта и напечатав npm install в инструменте командной строки (после перехода к папка проекта). Хорошо.

Но что, если я, как обычный пользователь gulp, не планирую загружать и делиться своими материалами в пространстве npm и не заинтересован в поддержке devDependencies, могу ли я в этом случае просто установить плагины gulp глобально, как npm install -g gulp-sass? Будут ли они найдены через глобальный путь в моей системе? Является ли это вообще возможностью, если я не хочу беспокоиться о том, чтобы скопировать package.json, запускать npm install каждый раз, когда я создаю новый проект, или на моем компьютере разбросано несколько копий одних и тех же модулей? диск ?

0

curveball

18 Фев 2017 в 14:53

2 ответа

Лучший ответ

Для плагинов, которые вы используете через gulp, вам нужно установить их локально в проект. Несмотря на то, что вам нужно установить gulp на глобальном и локальном уровне, запустите файл, а затем для проекта выберите команды и функции на основе gulp.

Причина, по которой вы должны установить плагины через npm локально, заключается в том, что он специфичен для проекта, например, если вы затем загрузили этот проект на свой сервер или хост на github, вам нужно было бы пойти и глобально установить все ваши пакеты снова. Если они сохранены, они существуют в вашем packages.json, так что когда вы запускаете npm install для установки всех пакетов для указанного проекта, npm знает, что устанавливать.

Если я могу уточнить что-нибудь, дайте мне знать.

1

user3329290user3329290
18 Фев 2017 в 12:11

Тип «глобальной установки» для описанного типичного случая OP может заключаться в том, чтобы иметь папку, в которую вы помещаете свой package.json со всеми зависимостями, необходимыми для каждого из ваших проектов, и запускаете npm install оттуда. И поместите здесь также свои gulpfiles для каждого проекта (вы можете назвать их как хотите), например, gulpfile-project1.js, conf-project2.js … что угодно.

Конечно, измените ваши пути в этих файлах соответственно. И из этого каталога запустите gulp, используя флаг -f:

gulp -f gulpfile-project1.js

Итак, вы заканчиваете этим видом лесов:

my_dev_directory
  - project1
    - dev
      - main.less
      - main.js
    - www
      - main.css
      - main.js
  - gulp
    - node_modules
    - package.json
    - package-lock.json
    - gulpfile-project1.js

В ваших gulpfiles начните объявлять const с базовым путем вашего проекта, чтобы упростить все объявления пути, например:

const path_dev = '../project1/dev';
const path_www = '../project1/www';

Таким образом, на вашем диске установлен только один каталог node_modules, а каталоги ваших проектов содержат только общедоступные файлы, которые вы хотите загрузить, но не файлы dev.

Конечно, одним из основных недостатков является то, что вы используете одну и ту же версию модуля для всех своих проектов, но она отвечает потребностям ОП, и даже если это не рекомендуется, а не «правильный способ сделать», вы можете делать все, что хотите с вашими инструментами разработки 🙂

0

UnSeulT
24 Янв 2020 в 17:08

Grunt vs Gulp — сборщики файлов

Alla Rud

18.05.2016
1
4868
на прочтение 4 минуты

Grunt и Gulp — популярные сборщики файлов, которыми пользуются много разработчиков. Рассмотрим особенности и возможности каждого из них.

GruntJS — написан на JavaScript, использует Node.js и поддерживается разными платформами. Официальная страница — gruntjs.com. ПО имеет плагины для: уменьшение JavaScript и CSS, интеграции предварительных процессоров для CSS и JavaScript таких, как Sass/Compass, Less and Stylus, CoffeeScript или LiveScript Сасс / Compass, оптимизации размеров файлов изображения PNG и JPEG и автоматического встраивания изображений, и много другого полезного для Вашей работы. С помощью Grunt Вы сможете создать свой качественный продукт. На официальном сайте можно найти ссылки на все возможные плагины и начать ими пользоваться. Кроме того, данный продукт станет незаменимым помощником при написании больших веб-приложений. В чем же его особенности: программа  интегрирует оптимизации для Require.js и Google Closure Compiler, позволяет предварительной компиляции шаблонов Handlebars, Jade, Underscore, Mustache, Eco или Hogan. В наличии  плагины для популярных каркасов для тестирования — Jasmine, Mocha, QUnit и Cucumber.

Как видим, преимуществ достаточно. Перейдем к подготовке работы с Grunt. Прежде нужно установить nodejs, файлы установки можно найти на официальном сайте. Далее создаем в папке с проектом два файла package.json и Grunfile.js, делаем их настройку. Создаем папку под проект, или заходим в уже существующую с помощью консоли, и выполняем команду npm install, для того что бы установить Grunt, и все нужные пакеты (которые описываем предварительно в package.json). Для запуска Grunt, запускаем команду grunt в консоли. Установка завершена!

GruntJS — гибкий и полезный инструмент для автоматизации процесса повторяющихся заданий.

Gulp — еще один сборщик проектов, который ускоряет разработку, автоматизируя запуск задач. Имеет большое количество плагинов. А также позволяет управлять файлами javascript и настраивать запуск задач другими задачами.

Gulp.js использует код вместо конфигураций. Это делает его более простым в управлении. Для быстроты работы используется stream. Отличается от Grunt тем, что вместо создания input/output для каждого плагина Gulp передаёт исходные файлы через все установленные плагины, чтобы затем создать выходной файл.

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

Таск-менеджер Gulp.js создан в качестве достойной альтернативы популярному GruntJS.

Ознакомимся с основными различиями между GruntJS и Gulp.js.

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

В сборщики Gulp так как он более новый, разработчики сделали все, чтобы не повторить в нем недостатки Grunt. Прежде всего, не нужно использовать плагин  watch, функция реагирования на изменения в файлах уже есть в ядре. Используется простой и понятный JavaScript-код, а в Grunt конфигурационные файлы напоминают объект  JSON. Ну и в Grunt  задачи работают с файлами вместо потоков данных, а в Gulp, как уже писалось выше, работа основана на потоковой передачи данных, что намного удобней.

Более старый Grunt имеет больше плагинов чем Gulp, но это связано с тем, что Gulp менее зрелый проект. Плагины Grunt для оптимизации работы (имееются также в Gulp): grunt-contrib-watch, grunt-contrib-jshint, grunt-mocha, grunt-notify, grunt-contrib-uglify. Для Gulp есть специальный плагин gulp-grunt, который дает возможность запускать файлы Grunt.

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

Также к вашему вниманию следущие обзоры на нашем блоге — Обзор актуальных шаблонизаторов JS и О Node.js для начинающих.

Использование ES6 в Gulp | Блог Ирины Соколовской

Относительно недавно я начала использовать в своих проектах новый стандарт JavaScript, ES6. В этой записи я расскажу, как настроить Gulp, чтобы внутри gulpfile тоже можно было писать на ES6.

Способ 1, с использованием Babel

Так как я занимаюсь в основном фронтендом, то для того, чтобы код, написанный на ES6, запускался в браузере, я использую Babel. Сборку проекта я делаю при помощи Gulp. Поэтому, можно обработать gulpfile при помощи Babel.

Для нового проекта установка будет выглядеть так:

1. Инициализировать npm в папке проекта: npm init
2. Установить для проекта Gulp: npm install --save-dev gulp и Babel: npm install --save-dev babel-core babel-preset-es2015
3. В файле package.json (он появится после выполнения инициализации npm) добавить в раздел со скриптами команду для запуска Gulp:
   

   
   

   «scripts»: {   «gulp»: «./node_modules/gulp/bin/gulp.js» }

   
   
   
   Благодаря этому, сборка запускается командой npm run gulp.

4. Теперь надо создать в папке проекта файл .babelrc со следующим содержимым:
   

   
   

   {   «presets»: [«es2015»] }

   
   

После этого можно создать gulpfile с названием gulpfile.babel.js, и написать в нем необходимые такси, например:

Babel позволяет использовать внутри gulpfile все новинки, появившиеся в ES6, в том числе модули.

Способ 2, с использованием новой версии Node.js

В Node.js версии 6, которая вышла всего несколько дней назад, 27 апреля, реализовано 93% возможностей ES6, что больше, чем в Babel. Это позволяет использовать новые возможности языка внутри gulpfile без дополнительных инструментов, что, как мне кажется, должно работать быстрее.

К сожалению, использование новых версий возможно не всегда, так как могут возникать конфликты с уже используемыми в проекте пакетами. Например, node-sass, и соответственно gulp-sass, пока не работают на nodejs 6.

Кураторский список полезных плагинов gulp для потрясающей и простой веб-разработки. · GitHub

Кураторский список полезных плагинов gulp для потрясающей и простой веб-разработки. · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Кураторский список полезных плагинов gulp для потрясающей и простой веб-разработки.

Кураторский список полезных плагинов gulp для потрясающей и простой веб-разработки.

Глобальный

• main-bower-files — выбирает все файлы, удовлетворяющие критериям фильтрации, из основных зависимостей bower. Полезно для фильтрации файлов шрифтов '** / *. {Eot, svg, ttf, woff, woff2}' и копирования их в / dist / fonts /
• wiredep — добавляет ссылки на файлы зависимостей bower в html / js / css, которые содержат правильный тег комментария
• gulp-sourcemaps — строить исходные карты.Используйте это вместо создания sass или minifier, если впоследствии вы проделаете дополнительную работу с этими файлами, например, автопрефикс css.
• gulp-watch — лучше gulp.watch, потому что слушает новые файлы
• gulp-cached — кэширование в памяти для более быстрой сборки
• gulp-concat — объединить файлы
• gulp-rename — переименовать файлы
• gulp-zip — zip файлы
• gulp-Remember — запоминает файлы, которые прошли через него, и добавляет в поток только те файлы, которые когда-либо видели.

Javascript

CSS

HTML

• gulp-useref — анализирует выбранные файлы, проверяет комментарии к сборке, которые при использовании используются для объединения файлов. Можно получить несколько сборок, а затем выполнить определенную работу с каждой из них, например, минимизировать css и jshint javascript. Предпочитаю вводить глоток
• gulp-inject — плагин для вставки JavaScript, таблиц стилей и веб-компонентов для Gulp, то есть вставка ссылок на файлы в ваш index.HTML
• gulp-minify-html — минимизировать html
• gulp-substituter — заменить совпадающие строки в файлах на определенные значения

ИЗОБРАЖЕНИЙ

Помощники

Тестирование

Вы не можете выполнить это действие в настоящее время.

Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс.
Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

Awesome gulp — тщательно подобранный список потрясающих ресурсов, плагинов и шаблонов Gulp для лучшей автоматизации рабочего процесса разработки

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

Ищете что-то другое? Взгляните на другие замечательные списки.

Вклад

: octocat: Любой вклад приветствуется. Не стесняйтесь вносить свой вклад (рекомендации).

Содержание

Легенда

[: no_entry:] — Уведомление о прекращении поддержки;

Ресурсы

Общие ресурсы

Официальная документация

Сообщество

Учебники

Учебники Gulp

Gulp 4 Учебники

Gulp с Browserify

Gulp с угловым

Gulp с Angular и Browserify

Gulp с Angular и Webpack

Gulp с React и Browserify

Глоток с углем

Разные ресурсы

Плагины

Сборник

Транспиляция

Конкатенация

Минификация

Оптимизация

Внедрение активов

• gulp-useref — Анализирует блоки сборки в файлах HTML для замены ссылок на неоптимизированные сценарии или таблицы стилей.
• gulp-inject — Преобразует каждый файл в строку и вставляет каждую преобразованную строку в заполнители в файлах целевого потока.
• wiredep — Подключите зависимости Bower к исходному коду.

Шаблоны

Линтинг

Живая перезагрузка

Кэширование

Управление потоком

• merge-stream — объединить несколько потоков в один чередующийся поток.
• streamqueue — Постепенно направляет потоки в очередь.
• run-sequence — запускает серию зависимых задач gulp по порядку.
• gulp-if — Условно запустить задачу.

Лесозаготовка

• gulp-notify — Плагин уведомлений для gulp.
• gulp-size — Показать размер вашего проекта.
• gulp-debug — Отладка потоков виниловых файлов, чтобы увидеть, какие файлы проходят через ваш конвейер gulp.

Тестирование

Разные плагины

Строительные леса

Заглушки

• веб-стартовый комплект — Google Web Starter Kit.
• gulp-plugin-markerplate — шаблон для запуска создания подключаемых модулей gulp.

Стартовый набор для полимеров

• — отправная точка для приложений Polymer 1.0.
• este — Самый полный стек разработчика React / Flux и стартовый набор для изоморфных функциональных веб-приложений.
• mnml — минимальный шаблон для запуска адаптивного проекта HTML5 / Sass.
• kraken — легкий шаблон, ориентированный на мобильные устройства, для интерфейсных веб-разработчиков.
• angularjs-gulp-browserify-template — шаблон с использованием AngularJS, Sass, gulp и Browserify.
• хапи-ниндзя — Узел.js, Hapi и Swig.
• laravel-5-cabinplate — Шаблонный проект Laravel 5.
• react-starterkit — стартовый комплект React, который содержит react-router, Reflux, jest, webpack, gulp и Stylus.

Генераторы Йомен

Разное

• elixir — чистый, свободный API для определения основных задач gulp для ваших приложений Laravel.
• gulp-app — Gulp как приложение (OS X).
• lmn-gulp-tasks — Пример модульного тестирования задач gulp.
• gulp-chef — элегантный, интуитивно понятный способ повторного использования задач gulp.

Лицензия

Насколько это возможно в соответствии с законом, Филипп Алферов отказался от всех авторских и смежных прав на эту работу.

Плагин

Gulp — SegmentFault 思 否

Ранее мы упоминали, что при обучении сжатию JS, CSS, изображений и других файлов вам необходимо использовать некоторые связанные плагины. Gulp предоставляет несколько полезных плагинов для обработки HTML и CSS, JavaScript, графики и некоторого другого контента.Давайте посмотрим на некоторые из различных типов плагинов в gulp.

Плагины HTML и CSS

902 файлы в каталоге CSS и выполнять перезагрузку страниц в реальном времени во всех браузерах при изменении файлов

14 плагин JavaScript 902 902 902 902 902 902 902

 $ sudo npm install gulp-cli -g 

 $ npx mkdir install-project
$ cd install-project 

 $ npm init 

 $ npm install --save-dev gulp 

 $ gulp - версия 

  npm install gulp-cli -g  

  var gulp = require ('gulp');

глоток.task ('запустить-эту-общую-задачу', function () {
    console.log («Это простая задача. Теперь запустите ее»);
});  

  npm install --save-dev gulp  

  gulp run-this-common -task  

  npm install gulp-imagemin gulp -less gulp-jshint gulp-concat gulp-uglify gulp-rename --save-dev  

  const gulp = require ('глоток');

const imagemin = require ('gulp-imagemin');
const jshint = require ('gulp-jshint');
const concat = require ('gulp-concat');
const less = require ('gulp-less');
const uglify = require ('gulp-uglify');
const rename = require ('gulp-rename');


глоток.task ('lint', () => {
    вернуть gulp.src ('js / *. js')
        .pipe (jshint ())
        .pipe (jshint.reporter ('по умолчанию'));
});


gulp.task ('меньше', () => {
    вернуть gulp.src ('меньше / *. меньше')
        .pipe (меньше ())
        .pipe (gulp.dest ('dist / css'));
});


gulp.task ('скрипты', () => {
    вернуть gulp.src ('js / *. js')
        .pipe (concat ('build.js'))
        .pipe (gulp.dest ('расстояние'))
        .pipe (переименовать ('build.min.js'))
        .pipe (uglify ())
        .pipe (gulp.dest ('dist / js'));
});


gulp.task ('compress-images', () => {
     глоток.src ('изображения / *')
        .pipe (imagemin ())
        .pipe (gulp.dest ('расстояние / изображения'))
});


gulp.task ('смотреть', () => {

    
    gulp.watch ('js / *. js', ['lint', 'scripts']);

    
    gulp.watch ('меньше / *. меньше', ['меньше']);

    
    gulp.watch ('изображения / *', ['сжатие изображений']);
});


gulp.task ('жаргон', ['меньше', 'сценарии', 'сжатие изображений', 'смотреть']);  

  npm install @ auth0 / auth0-spa-js  

  импортировать createAuth0Client из '@ auth0 / auth0-spa-js';

let auth0Client;

асинхронная функция createClient () {
  return await createAuth0Client ({
    домен: 'ВАШ_ДОМЕН',
    client_id: 'YOUR_CLIENT_ID',
  });
}

асинхронная функция login () {
  ждать auth0Client.loginWithRedirect ();
}

function logout () {
  auth0Client.logout ();
}

асинхронная функция handleRedirectCallback () {
  const isAuthenticated = ждать auth0Client.isAuthenticated ();

  if (! isAuthenticated) {
    const query = window.location.search;
    if (query.includes ('code =') && query.includes ('state =')) {
      ждать auth0Client.handleRedirectCallback ();
      window.history.replaceState ({}, document.title, '/');
    }
  }

  ждать updateUI ();
}

асинхронная функция updateUI () {
  const isAuthenticated = ждать auth0Client.isAuthenticated ();

  const btnLogin = document.getElementById ('btn-login');
  const btnLogout = document.getElementById ('btn-logout');

  btnLogin.addEventListener («щелчок», вход в систему);
  btnLogout.addEventListener («щелкнуть», выйти из системы);

  btnLogin.style.display = isAuthenticated? 'нет': 'блокировать';
  btnLogout.style.display = isAuthenticated? 'блок': 'нет';

  if (isAuthenticated) {
    const username = document.getElementById ('имя пользователя');
    const user = await auth0Client.getUser ();

    имя пользователя.innerText = имя_пользователя;
  }
}

window.addEventListener ('load', async () => {
  auth0Client = ждать createClient ();

  ждать handleRedirectCallback ();
});  

  
 Добро пожаловать   
 Войти 
 Выйти