Gulp plugins: Using Plugins | gulp.js

Современная сборка 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 — сокращает стили.

Пример

Файлы 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-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() {
  return del('build')
}

Главное — не забыть вызвать функцию-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.

Простая и быстрая сборка frontend проекта с помощь gulp.

Введение

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

---

Сейчас в интернете существует большое число различных сборщиков и подходов к ней, и каждый выбирает для себя что-то по вкусу. Я только опишу вам один из многих подходов, а вы уже решите сами, подходит он вам или нет.3.9.0″
   }
}

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

Основные плагины, с которыми я хочу вас познакомить:

gulp-minify-css — нужен для минимизации CSS кода, создаст один файл *.min.css

gulp-uglify — будет минимизировать наш JS, создаст один файл *.min.js

gulp-autoprefixer — авто-добавление добавляет вендорные префиксы (-webkit, -o, -moz) к CSS свойствам, нужно чтобы ваш код поддерживался во всех браузерах.

browser-sync — понадобится  для запуска локального сервера.

gulp-sass — предназначен для компиляции SCSS и SASS кода.

gulp-sourcemaps — предназначен для генерации css sourscemaps, которые понадобятся при отладке кода

//= footer.html   эти комментарии будут заменены на код с файла при компиляции

gulp-watch — предназначен для отслеживания за изменениями файлов.

rimraf —  для очистки папок по завершению сборки (rm -rf для nodejs).

После установки всех плагинов у нас будет файл package.json:

делается это при помощи команды

npm install name_of_package —save—dev 

где —save-dev означает то, что пакет будет остановлен в проект, а не глобально. Для глобальной установки используйте тег -g.

Bower

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

Давайте поставим его в наш проект. Для установки напишем в консоли:

Заполняйте поля те, что знаете, остальное пропускайте. В конце вы получите файл bower.json:

Как я разбирался с Webpack. Настройка на примере SCSS. — WordPressify

Как ни странно, детально разобраться с вебпаком я захотел именно для того, чтобы использовать в своих проектах CSS-пропроцессоры. Даже когда появился Gutenberg, я в это решил не вникать и создавал блоки для него на чистом JS 😁

В этом уроке постараюсь рассказать всё пошагово и очень легко, для тех, кто никогда не работал ни с чем из этого, но очень хочет. Начнём с настройки Node.js, потом перейдём к установке Webpack, и только потом уже установим необходимые для работы с SCSS препроцессором модули, также настроим минификацию.

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

1. Node.js

1.1 Установка

Всё начинается очень легко – нужно перейти на сайт nodejs.org  и скачать её как обычную прогу.

Проверяем, что всё установилось, для этого открываем Терминал (у меня Mac OS) и попробуем прочекать версию node.js: node -v

1.2 Инициализируем проект

Для этого открываем терминал в папке с проектом (это лучше сделать через текстовый редактор, который вы используете, я например установил пакет для Atom для работы с терминалом и всё) и запускаем там npm init, после чего будут появляться различные вопросы, например как назвать ваш проект, какая у него версия и т.д

• package name – название проекта (по умолчнию – название папки проекта),
• version – версия (по умолчанию 1.0.0),
• description – описание проекта,
• entry point – типо основной файл вашего npm-проекта, который и будет запускаться при его сборке, это нам пока не понадобится, можно оставить значение по умолчанию (по умолчанию index.js),
• test command – команда, которая будет происходить при запуске npm run test, оставляем значение по умолчанию,
• git repository и keywords не понадобится,
• author – легко, имя автора,
• license – лицензия, (по умолчанию ISC),

Не беспокойтесь, любую из этих настройек вы сможете вручную поменять в файле package.версия",

В проекте с темой появится папка node_modules, там будут лежать файлы модуля вебпак. Когда потом будете переносить ваш плагин/тему на живой сайт, очень прошу, не переносите эту папку!! 🤦‍♂️

После установки также откройте файл package.json и добавьте в параметр scripts следующее:

"scripts": {
	...
 
	"build": "webpack",
	"start": "webpack --watch"
},

• Когда в консоли будете писать npm run build – у вас будет запускаться сборка проекта.
• Если напишете npm run start – webpack начнём мониторить изменения файлов и осуществлять сборку после сохранения.

2.2 Конфигурация webpack.config.js

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

const path = require('path');
 
module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'assets'),
		filename: 'scripts.js'
	}
};

Напоминаю, что наша цель вебпака в этом уроке – чтобы он собирал нам скрипты в scripts.js, и файл style.css из файлов sass. Т е есть файлы на входе и на выходе. И в webpack.config.js мы как раз это и прописываем.

• entry(строка 4) – ничего общего с index.js из шага 1.2. Это входной JS файл, в который будут подключаться все остальные, он находится в папке src. Тут ничего придумывать не нужно – всё стандартно.
• output (строка 5) – то, где создавать файл результата выполнения сборки. У меня это assets/script.js, но стандартно обычно для этого используется директория dist.

В принципе можете создать все необходимые директории и файлы, а также index.php (у нас же тема WordPress) и подключить в неё файл scripts.js

2.3 Проверяем, что на этом этапе webpack работает

Суть проверки будет заключаться в том, что я создам два JS файла с каким-то изишным кодом, подключу их в index.js, запущу вебпак и проверю, что произойдёт на сайте.

Итак, я создаю два файла test.js и test_1.js, которые располагаются в папке /src/js. В каждый из них я запишу по одной строчке кода, например console.log( 'какой-то текст' ).

Затем в файле index.js я их подключаю следующим образом:

import './js/test.js';
import './js/test_1.js';

После этого открываю терминал для проекта и запускаю сборку npm run build. Теперь, если п

gulp — полезные плагины Gulp gulp sass — руководство по gulp — изучение gulp — от Microsoft Award MVP — обучение за 30 секунд

НАПИШИТЕ НАМ

Переключить боковую панель

• Учебники
• ТЕХНОЛОГИИ
  • ВСЕ ТЕХНОЛОГИИ
  • СТАТЬИ
• ПОЛНАЯ ФОРМА ^НОВАЯ
• ВЕБИНАРЫ
• ОШИБКИ И ИСПРАВЛЕНИЯ
• ИНТЕРВЬЮ
• ФОРУМЫ
• ВИДЕО
  • КОЛИЧЕСТВЕННАЯ СПОСОБНОСТЬ
  • НЕ ГЛАВНЫЙ
  • ГРУППОВОЕ ОБСУЖДЕНИЕ
  • СТРАНЫ РАЗУМНЫХ ВОПРОСОВ ДЛЯ ИНТЕРВЬЮ
  • ИНЖИНИРИНГ
• КАРЬЕРА
  • Программное обеспечение Интервью
  • HR Интервью
  • GD Интервью
  • Примеры резюме
  • Инженерное дело
  • Искусство / наука
  • Masters

Gulp Recipes — Часть 2: этот плагин может вам не понадобиться

Прошел месяц, были даны ответы на многие вопросы по StackOverflow, так что вот еще один раунд распространенных проблем Gulp с простым и повторяемым решением.Обязательно ознакомьтесь с выпуском прошлого месяца, а также с моими статьями о Gulp, PHP и BrowserSync, а также о нескольких пакетах Browserify.

Подтвердите запросы в Gulp

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

На самом деле существует два плагина, выполняющих это, один из которых gulp-confirm, а другой — gulp-prompt, оба имеют собственное представление о том, как это должно работать. Последний на самом деле является оболочкой для запрашивающего и передает все параметры без фильтров и без изменений.

Так почему бы не использовать Inquirer напрямую? API довольно прост, так что попробуйте:

  var inquirer = require ('запросчик'); 
 gulp.task ('default', function (done) {
 inquirer.подсказка ([{
 type: 'confirm', 
 message: 'Вы действительно хотите начать?', 
 default: true, 
 name: 'start' 
}], функция (ответы) {
 if (answers.start ) {
 gulp.start ('your-gulp-task'); 
} 
 done (); 
}); 
}); 
  

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

Синхронизация каталогов на жестком диске

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

Прежде, чем я придумал решения, я спросил несколько вещей в ответ:

• Вы действительно хотите, чтобы обе папки синхронизировались, что означает, что изменения в папке A будут отображаться в папке B, и наоборот?
• Нужна ли вам эта синхронизация как часть развертывания в удаленном месте (если да, используйте gulp-rsync) или во время процесса разработки, когда у вас запущен наблюдатель.

Оказалось, что истинного сценария A <-> B на самом деле никогда не было, это был скорее сценарий A -> B во время разработки. И для этого сценария решение было на удивление простым. Если вы хотите, чтобы ваше содержимое было в другой папке, вам вообще не нужен какой-либо плагин Gulp. Фактически, вам вообще не нужен плагин Gulp:

  
 gulp.task ('sync', function () {
 return gulp.src ('./ a / ** / *') 
 .pipe (gulp.dest ('./ b')); 
} ); 
 
 глоток.task ('watch', function () 
  

Использование Gulp — документация ASP.NET

Средство выполнения задач — это инструмент, который автоматизирует эти рутинные задачи разработки и многое другое. Visual Studio обеспечивает встроенную поддержку двух популярных JavaScript бегуны задач на основе: Gulp и Grunt.

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

Шаблон проекта веб-приложения ASP.NET Core используется, чтобы помочь вам приступить к разработке и написанию кода нового веб-приложения в Visual Studio. Он содержит функции по умолчанию для демонстрации многих аспектов ASP.СЕТЬ. В шаблон также входят Node Package Manager (npm) и Gulp, что упрощает добавление пакетов и минификации в проект.

Примечание

Вам не нужен шаблон проекта веб-приложения ASP.NET Core или Visual Studio для реализации объединения и минификации. Например, создайте проект ASP.NET с помощью Yeoman, отправьте его на GitHub, клонируйте его на Mac, а затем объедините и уменьшите проект.

Когда вы создаете новый веб-проект с использованием шаблона веб-приложения ASP.NET Core, Visual Studio включает Gulp.js npm, файл gulpfile.js и набор зависимостей Gulp. Пакет npm содержит все необходимые компоненты для запуска задач Gulp в вашем проекте Visual Studio. Предоставляемый файл gulpfile.js определяет набор задач Gulp, которые можно запускать из окна Task Runner Explorer в Visual Studio. В разделе devDependencies файла package.json указываются устанавливаемые зависимости во время разработки. Эти зависимости не развертываются с приложением.Вы можете добавить новые пакеты в devDependencies и сохранить файл:

gulp-load-plugins — автоматически загружать любые плагины gulp в ваш пакет. Json

Загружает плагины gulp из зависимостей пакетов и прикрепляет их к выбранному вами объекту.
gulp — это набор инструментов, который помогает автоматизировать болезненные или трудоемкие задачи в рабочем процессе разработки.
Node.js — это серверный движок JavaScript на основе событий.

Последние обновления

Ubuntu 20.04 focal / universe: версия 1.5.0-1 представлена ​​

07.01.2020

• Первый выпуск (закрывается: # 879525)

Ubuntu 19.10 eoan / universe: повторно представлена ​​версия 1.5.0-1

2019-10-10

• Первоначальный выпуск (закрывается: # 879525)

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 удалена

2019-10-10

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 повторно представлена ​​

2019-10-10

• Первый выпуск (Закрытие: # 879525)

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 удалена

2019-10-10

Ubuntu 19.10 eoan / universe: повторно представлена ​​версия 1.5.0-1

2019-09-25

• Первый выпуск (Закрывает: # 879525)

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 удалена

2019-09-25

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 повторно введена

2019-09-25

• Первый выпуск (Закрытие: # 879525)

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 удалена

2019-09-25

Ubuntu 19.10 eoan / universe: повторно представлена ​​версия 1.5.0-1

2019-09-06

• Первый выпуск (Закрывает: # 879525)

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 удалена

2019-09-06

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 повторно представлена ​​

2019-09-06

• Первый выпуск (Закрытие: # 879525)

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 удалена

2019-09-06

Ubuntu 19.10 eoan / universe: повторно представлена ​​версия 1.5.0-1

2019-09-06

• Первый выпуск (Закрывает: # 879525)

Ubuntu 19.10 eoan / universe: версия 1.5.0-1 удалена

2019-09-06

Ubuntu 19.