[email protected] — задача gulp v0
Twitter LinkedIn Facebook Адрес электронной почты
- Статья
- Чтение занимает 4 мин
Запустите gulp Node. js систему сборки на основе задач потоковой передачи.
Node.js системе сборки на основе задач потоковой передачи.
Синтаксис
# gulp v0 # Run the gulp Node.js streaming task-based build system. - task: [email protected] inputs: gulpFile: 'gulpfile.js' # string. Required. gulp File Path. Default: gulpfile.js. #targets: # string. gulp Task(s). #arguments: # string. Arguments. # Advanced #workingDirectory: # string. Alias: cwd. Working Directory. gulpjs: 'node_modules/gulp/bin/gulp.js' # string. Required. gulp.js location. Default: node_modules/gulp/bin/gulp.js. # JUnit Test Results #publishJUnitResults: false # boolean. Publish to Azure Pipelines. Default: false. #testResultsFiles: '**/TEST-*.xml' # string. Required when publishJUnitResults = true. Test Results Files. Default: **/TEST-*.xml. #testRunTitle: # string. Optional. Use when publishJUnitResults = true. Test Run Title. # Code Coverage enableCodeCoverage: false # boolean. Required.Enable code Coverage. Default: false. #testFramework: 'Mocha' # 'Mocha' | 'Jasmine'. Optional. Use when enableCodeCoverage = true. Test Framework. Default: Mocha. #srcFiles: # string. Optional. Use when enableCodeCoverage = true. Source Files. #testFiles: 'test/*.js' # string. Required when enableCodeCoverage = true. Test Script Files. Default: test/*.js.
# Gulp v0 # Node.js streaming task based build system. - task: [email protected] inputs: gulpFile: 'gulpfile.js' # string. Required. Gulp File Path. Default: gulpfile.js. #targets: # string. Gulp Task(s). #arguments: # string. Arguments. # Advanced #workingDirectory: # string. Alias: cwd. Working Directory. gulpjs: 'node_modules/gulp/bin/gulp.js' # string. Required. gulp.js location. Default: node_modules/gulp/bin/gulp.js. # JUnit Test Results #publishJUnitResults: false # boolean. Publish to Azure Pipelines/TFS. Default: false. #testResultsFiles: '**/TEST-*.xml' # string. Required when publishJUnitResults = true.Test Results Files. Default: **/TEST-*.xml. #testRunTitle: # string. Optional. Use when publishJUnitResults = true. Test Run Title. # Code Coverage enableCodeCoverage: false # boolean. Required. Enable code Coverage. Default: false. #testFramework: 'Mocha' # 'Mocha' | 'Jasmine'. Optional. Use when enableCodeCoverage = true. Test Framework. Default: Mocha. #srcFiles: # string. Optional. Use when enableCodeCoverage = true. Source Files. #testFiles: 'test/*.js' # string. Required when enableCodeCoverage = true. Test Script Files. Default: test/*.js.
# YAML Syntax is not supported in TFS 2018. # Use the classic designer to add and configure tasks. # See the following Inputs section for details on the inputs that this task supports.
Входные данные
gulpFile
— Путь к файлу gulpstring
. Обязательный. Значение по умолчанию: gulpfile.js
.
Относительный путь от корневого каталога репозитория файла скрипта gulp для запуска.
gulpFile
— Путь к файлу Gulpstring
. Обязательный. Значение по умолчанию: gulpfile.js
.
Относительный путь от корневого каталога репозитория файла скрипта gulp для запуска.
targets
— Задачи gulpstring
.
Необязательный элемент. Список выполняемых задач с разделителями пробелов. Если этот параметр не указан, будет выполнена задача по умолчанию.
targets
— Задачи Gulpstring
.
Необязательный элемент. Список выполняемых задач с разделителями пробелов. Если этот параметр не указан, будет выполнена задача по умолчанию.
arguments
— Аргументыstring
.
Дополнительные аргументы, передаваемые gulp. —gulpfile не требуется, так как он уже добавлен с помощью входных данных gulpFile выше.
workingDirectory
— Рабочий каталог
Псевдоним ввода: cwd
. string
.
Текущий рабочий каталог при запуске скрипта. По умолчанию используется папка, в которой находится скрипт.
gulpjs
— расположениеgulp.jsstring
. Обязательный. Значение по умолчанию: node_modules/gulp/bin/gulp.js
.
gulp.js для запуска, когда агент не может найти глобальный установленный gulp. По умолчанию используется gulp.js в папке node_modules рабочего каталога.
publishJUnitResults
— Публикация в Azure Pipelinesboolean
. Значение по умолчанию: false
.
Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой Gulp в Azure Pipelines/TFS.
publishJUnitResults
— Публикация в Azure Pipelines/TFSboolean
. Значение по умолчанию:
false
.
Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой Gulp в Azure Pipelines/TFS.
publishJUnitResults
— Публикация в TFS/Team Servicesboolean
. Значение по умолчанию: false
.
Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой Gulp в Azure Pipelines/TFS.
testResultsFiles
— Файлы результатов тестаstring
. Обязательный, если publishJUnitResults = true
. Значение по умолчанию: **/TEST-*.xml
.
Путь к файлам результатов теста. Можно использовать подстановочные знаки. Например, для всех XML-файлов, **/TEST-*.xml
имя которых начинается с TEST-.
testRunTitle
— Заголовок тестового запускаstring
. Необязательный элемент. Используется при
publishJUnitResults = true
.
Укажите имя для тестового запуска.
enableCodeCoverage
— Включение покрытия кодаboolean
. Обязательный. Значение по умолчанию: false
.
Выберите этот параметр, чтобы включить покрытие кода с помощью Стамбула.
testFramework
— Тестовая платформаstring
. Необязательный элемент. Используется при enableCodeCoverage = true
. Допустимые значения: Mocha
, Jasmine
. Значение по умолчанию: Mocha
.
Выберите тестовую платформу.
srcFiles
— Исходные файлыstring
. Необязательный элемент. Используется при enableCodeCoverage = true
.
Укажите путь к исходным файлам, которые требуется подключитьRequire().
testFiles
— Тестовые файлы скриптовstring
. Обязательный, если enableCodeCoverage = true
. Значение по умолчанию: test/*.js
.
Укажите путь к файлам тестового скрипта.
Параметры управления задачами
Все задачи имеют параметры управления в дополнение к входным данным задачи. Дополнительные сведения см. в разделе «Параметры управления» и общие свойства задачи.
Выходные переменные
Нет.
Используйте эту задачу для выполнения задач gulp с помощью системы сборки на основе Node.js потоковой передачи.
Примечание
Gulp не предустановлен на всех размещенных агентах. Ознакомьтесь с установленным программным обеспечением на образах виртуальных машин.
Примеры
Запуск gulp.js
- task: [email protected] inputs: command: 'install' - task: [email protected] inputs: gulpFile: 'gulpfile.js' gulpjs: 'node_modules/gulp/bin/gulp.js'
Создание приложения Node.

- Создание приложения Node.js с помощью gulp
Требования
Требование | Описание |
---|---|
Типы конвейеров | YAML, классическая сборка |
Выполняется в | Agent, DeploymentGroup |
Требования | Локальные агенты должны иметь возможности , соответствующие следующим требованиям для выполнения заданий, использующих эту задачу: node.js |
Capabilities | Эта задача не удовлетворяет требованиям к последующим задачам в задании. |
Ограничения команд | Любой |
Переменные settable | Любой |
Версия агента | |
Категория задач | Сборка |
Видео курс Верстка страниц с использованием Gulp. Подготовка gulpfile.js
- Каталог >
- Верстка страниц с использованием Gulp >
- Подготовка gulpfile.js
Для просмотра полной версии видеокурса, онлайн тестирования и получения доступа к дополнительным учебным материалам купите курс Купить курс
Для просмотра всех видеокурсов ITVDN, представленных в Каталоге, а также для получения доступа к учебным материалам и онлайн тестированию купите подписку Купить подписку
№1
Установка Gulp. Настройка рабочего окружения
0:23:16
Материалы урокаДомашние заданияТестирование
Цель урока — познакомиться с описанием курса, настроить рабочее окружение. Создать таск для Gulp для проверки корректности установки и отсутствия ошибок.
Читать дальше…
Свойства и возможности Gulp
0:53:50
Материалы урокаДомашние заданияТестирование
Цель урока — познакомиться с особенностями 4 версии Gulp, разновидностью Gulp файлов и Gulp API.
Читать дальше…
Подготовка gulpfile.js
1:06:58
Материалы урокаДомашние заданияТестирование
Цель урока – создать набор тасков для автоматизации задач. В уроке будет автоматизирована обработка html и шаблонизатора pug. Рассмотрены примеры автоматизации и обработки процессов и скриптов с помощью gulp плагинов.
Читать дальше…
Создание страницы
0:43:52
Материалы урокаДомашние заданияТестирование
Цель урока – на основе полученных в предыдущих уроках знаний собрать сборку тасков для создания веб страницы. Подготовить репозиторий для хранения проекта и дальнейшей публикации страницы, познакомиться с инструментом Figma для работы с дизайном страницы и получения контента. Создать структуру файлов и папок для удобной разработки сайта.
Читать дальше…
Упаковка и деплой
1:02:02
Материалы урокаДомашние заданияТестирование
Цель урока – выполнить стилизацию проекта, добавить скрипты для работы компонентов и реализации дизайна. На основе созданных тасков модифицировать разметку для замены путей в финальном файле. Выполнить финальную минификацию перед коммитом и отправкой сайта на github. Реализовать деплой репозитория на сервис Netlify.
Читать дальше…
ПОКАЗАТЬ ВСЕ
Регистрация через
✖или E-mail
Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.
Уже есть аккаунт
Получите курс бесплатно
✖Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.
РЕГИСТРАЦИЯ
Спасибо за регистрацию
✖Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN. com
ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ
Спасибо за регистрацию
✖Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.
НАЧАТЬ ОБУЧЕНИЕ
Подтверждение аккаунта
На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.
Отправить код еще раз
Изменить номер телефона
Ошибка
✖Конфигурация запуска/отладки: Gulp.js | DataSpell
Создать: Выполнить | Редактировать конфигурации | | Gulp.js
В этом диалоговом окне создайте конфигурации для запуска задач Gulp.js.
Перед началом
Gulp.JS-специфические настройки конфигурации
Предмет | Описание |
---|---|
GULPFILE 9003 | |
. | |
Задачи | В этом поле укажите задачи для выполнения. Выполните одно из следующих действий:
|
Аргументы | В этом текстовом поле укажите аргументы для выполнения задач. Используйте формат |
Интерпретатор узла | В этом поле укажите используемый интерпретатор Node.js. Это может быть локальный интерпретатор Node.js или Node.js в подсистеме Windows для Linux. |
Параметры узла | В этом текстовом поле введите специфичные для Node.js параметры командной строки, которые необходимо передать в исполняемый файл Node.js. В конфигурации по умолчанию введите Технически DataSpell вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Это делается бесшумно и не требует никаких действий с вашей стороны. Однако, если ваш Gulpfile.js написан на ECMA6, DataSpell по умолчанию не распознает этот формат и не может построить дерево задач. Чтобы решить эту проблему, укажите |
Пакет gulp | В этом поле укажите путь к пакету gulp, установленному локально, в корне проекта. |
Переменные среды | В этом поле укажите переменные среды для исполняемого файла Node.
|
Common settings
When you edit a run configuration (but not a run configuration template), you can specify the following options:
Name | Укажите имя для конфигурации запуска, чтобы быстро идентифицировать ее среди других при редактировании или запуске. |
Разрешить параллельный запуск | Разрешить параллельный запуск нескольких экземпляров этой конфигурации запуска. По умолчанию он отключен, и при запуске этой конфигурации во время работы другого экземпляра DataSpell предлагает остановить работающий экземпляр и запустить другой. Это полезно, когда конфигурация запуска потребляет много ресурсов и нет веской причины запускать несколько экземпляров. |
Сохранить как файл проекта | Сохраните файл с настройками конфигурации запуска, чтобы поделиться им с другими членами команды. Расположение по умолчанию — .idea/runConfigurations. Однако, если вы не хотите совместно использовать каталог .idea, вы можете сохранить конфигурацию в любой другой каталог в рамках проекта. По умолчанию он отключен, и DataSpell сохраняет параметры конфигурации запуска в .idea/workspace.xml. |
Панель инструментов
Представление в виде дерева конфигураций запуска/отладки содержит панель инструментов, которая помогает управлять конфигурациями, доступными в каталоге рабочей области, а также настраивать шаблоны конфигураций по умолчанию.
Item | Shortcut | Description |
---|---|---|
| Alt+Insert | Create a run/debug configuration. |
| Alt+Delete | Удалить выбранную конфигурацию запуска/отладки. |
| Ctrl+D | Создать копию выбранной конфигурации запуска/отладки. Обратите внимание, что вы создаете копии конфигураций по умолчанию. |
| Кнопка отображается только при выборе временной конфигурации. Нажмите эту кнопку, чтобы сохранить временную конфигурацию как постоянную. | |
| Переместить в новую папку / Создать новую папку. Вы можете сгруппировать конфигурации запуска/отладки, поместив их в папки. Чтобы создать папку, выберите конфигурации в категории, нажмите и укажите имя папки. Затем, чтобы переместить конфигурацию в папку, между папками или из папки, используйте кнопки перетаскивания или и . Чтобы удалить группировку, выберите папку и нажмите . | |
| Нажмите эту кнопку, чтобы отсортировать конфигурации в алфавитном порядке. |
Перед запуском
В этой области можно указать задачи, которые необходимо выполнить перед запуском выбранной конфигурации запуска/отладки. Задачи выполняются в порядке их появления в списке.
Item | Shortcut | Description |
---|---|---|
| Alt+Insert | Click this icon to add one of the following available tasks:
|
| Alt+Delete | Щелкните этот значок, чтобы удалить выбранную задачу из списка. |
| Введите | Щелкните этот значок, чтобы изменить выбранную задачу. |
/ | Alt+Up / Alt+Down | Щелкните эти значки, чтобы переместить выбранную задачу на одну строку вверх или вниз по списку. Задачи выполняются в порядке их появления в списке. |
Показать эту страницу | Установите этот флажок, чтобы отобразить параметры конфигурации запуска/отладки перед фактическим запуском конфигурации запуска/отладки. | |
Активировать окно инструмента | По умолчанию этот флажок установлен, и при запуске конфигурации запуска/отладки открывается окно инструмента «Выполнить» или «Отладка». В противном случае, если флажок снят, окно инструмента скрыто. Однако, когда конфигурация запущена, вы можете сами открыть для нее соответствующее окно инструментов, нажав Alt+4 или Alt+5 . |
Последнее изменение: 21 июля 2022 г.
Конфигурация тестового прогона/отладки utPLSQL: отладка JavaScript делать и знать, как настроить Gulp, не впадая в посторонние дискуссии о семантике HTML , интересно? Да, ты можешь. Вот.
Эта статья для вас?
Эта статья для вас, если вы ищете руководство, которое не делает предположений и перечисляет все шаги по установке Gulp — с самого начала, по порядку, без пробелов.
Это руководство также было создано для Mac. Несколько шагов будут отличаться для Windows.
Предварительные условия
- Базовые знания HTML, CSS и JavaScript
- Базовые знания по использованию командной строки
Цели
- Установите все необходимое, чтобы запустить Gulp.
- Скомпилируйте несколько файлов Sass в один файл CSS, примените префиксы поставщиков и минимизируйте.
Краткий обзор
Gulp. js — система потоковой сборки — это средство запуска задач JavaScript, которое может автоматически выполнять избыточные задачи за вас. Как и многие другие полезные технические инструменты, Gulp не имеет руководства по началу работы для начинающих, о котором можно было бы говорить. На самом деле их руководство по началу работы начинается с шага 6 или около того. Если вы уже знаете, как работают Node и npm, и у вас все установлено, это здорово, но новичок только больше запутается и расстроится.
Я хочу кратко изложить несколько важных понятий. Не стесняйтесь прокручивать назад к этому после того, как вы начали добиваться некоторого прогресса для уточнения.
- Node.js — среда, которая позволяет запускать серверный JavaScript для Интернета.
- npm — менеджер пакетов для Node.js. Инструмент, который позволяет быстро и легко настраивать локальные среды и плагины Node.
- Локальный и глобальный — Node.
js устанавливается глобально, но Gulp и все его плагины будут устанавливаться локально для каждого проекта.
- Task Runner — средство запуска задач, такое как Gulp, автоматизирует все ваши процессы, поэтому вам не нужно о них думать. Gulp требует package.json и gulpfile.js
.
Список шагов
Со своей стороны, я попытаюсь создать потерянное руководство для начинающих по Gulp. Я перечисляю шаги, чтобы вы знали, во что ввязываетесь.
- Установить инструменты командной строки Xcode
- Установить доморощенный
- Установить Node.js
- Установить Gulp глобально
- Установить Node и Gulp локально
- Установить плагины Gulp
- Настроить проект
Есть много способов сделать это, но мы собираемся сделать именно так.
Примечание. В версии 2016 установка XCode и инструментов командной строки больше не требуется — Homebrew установит для вас необходимый интерфейс командной строки.
![]()
Установка инструментов командной строки Xcode
Это обязательное условие для установки Homebrew.
Установите Xcode
Загрузите Xcode из Mac App Store
Установите инструменты командной строки
Откройте Xcode и щелкните следующее.
Настройки > Загрузки > Инструменты командной строки
Установить Homebrew
Homebrew делает установку программ и пакетов на Mac невероятно простой. Откройте Терминал и введите следующее, затем следуйте инструкциям, которые он вам даст.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Установите Node.js
Мы будем использовать Homebrew для установки Node.js, среды JavaScript на стороне сервера, в которой работает Gulp. Node.js поставляется с npm, менеджером пакетов Node. Введите это в Терминале.
узел установки brew
Глобальная установка Gulp
Это позволит установить командную строку Gulp глобально. Это последний глобальный шаг перед тем, как мы начнем устанавливать вещи локально — для каждого проекта.
установка npm --global gulp-cli
Это конец глобальной установки! Ни один из этих шагов не нужно будет повторять. Отсюда мы начнем настраивать наш локальный проект.
Локальная установка Node и Gulp
С этого момента вам нужно перейти в папку, в которой вы храните свои веб-проекты. Для меня это /Users/tania/sites . Поскольку я начинаю в Терминале с /Users/tania
, я перейду на сайты
.
CD-сайты
Затем я создам новый каталог проекта.
mkdir startgulp
И перейдите во вновь созданную папку.
cd startgulp
Чтобы установить Node локально, вам нужен файл package.json
npm init
Эта команда поможет вам создать общий package. json . Это довольно просто, и просто нажмите Enter, если вы не уверены или не хотите что-то заполнять. Я просто дал ему описание, ключевые слова и автора, и файл был сгенерирован.
{ "имя": "пусковой глоток", "версия": "1.0.0", "description": "Начало работы с Gulp", «основной»: «index.js», "скрипты": { "test": "echo \"Ошибка: тест не указан\" && выход 1" }, "ключевые слова": [ "глоток", "дерзкий" ], "автор": "Таня Раша", "лицензия": "MIT" }
Теперь мы запустим команду для установки Node и Gulp.
npm install --save-dev gulp
Вы получите несколько предупреждений об устаревании и отсутствующих файлах, но не беспокойтесь слишком сильно.
npm WARN package.json [email protected] Нет поля репозитория. npm WARN package.json [email protected] Нет данных README
После этого вы можете перечислить свои файлы:
node_modules package.json
И вы увидите, что каталог node_modules создан. Ради собственного здравомыслия не спускайтесь в кроличью нору node_modules; ты можешь никогда не найти выход.
Установить плагины Gulp
На данный момент в нашем node_modules единственная установленная нами devDependency — это Gulp. Чтобы творить чудеса, нам нужно установить все плагины Gulp. Плагинов для Gulp очень много. Ради этой статьи мы собираемся установить четыре для нашего рабочего процесса веб-разработки.
- Gulp Sass для компиляции SCSS в CSS.
- Gulp Sourcemaps, который намного полезнее, чем вы можете себе представить.
- Gulp cssnano для минимизации и оптимизации выводимого CSS
- Gulp Autoprefixer, чтобы добавить префиксы поставщиков для выводимого CSS.
Это упрощает рабочий процесс — вы можете писать SCSS, не беспокоясь о добавлении префиксов или минимизации кода вручную, а исходные карты помогут вам найти источник CSS в файлах .scss
.
Если у вас нет опыта работы с Sass, я рекомендую прочитать «Изучите Sass сейчас: руководство по установке, использованию и пониманию Sass», чтобы лучше понять, как он работает.
![]()
Вот код для добавления всех четырех плагинов Gulp.
npm install --save-dev gulp-sass gulp-cssnano gulp-sourcemaps gulp-autoprefixer 91.6.0" }
Это все пакеты Node, которые вы установили.
Для дальнейшего использования вы можете упростить процесс, изначально вставив devDependencies в ваш package.json . После этого просто введите команду
npm install
, чтобы установить все плагины без необходимости указывать это в командной строке.
Настройка проекта
Последнее, что нам нужно сделать, это настроить файл с именем gulpfile.js , который представляет собой файл JavaScript, который будет определять весь процесс выполнения задачи.
Создайте gulpfile.js . Теперь у нас есть все части головоломки Gulp. Вот графическое представление того, как ваш проект должен выглядеть на данный момент:
Редактировать 03.
04.2017 — теперь вы увидите гораздо больше каталогов в папке node_modules из-за того, что npm изменил способ обработки зависимостей, так что не волнуйтесь, все работает по-прежнему.
Мы можем начать наш Gulpfile с определения переменной для каждого требования плагина.
'использовать строго' вар глоток = требуется('глоток') var sass = требуется ('глоток-дерзость') вар cssnano = требуется ('gulp-cssnano') var sourcemaps = require('gulp-sourcemaps') var autoprefixer = require('gulp-autoprefixer')
Мне нравится работать со всеми моими исходными файлами, такими как Sass, в каталоге src/, а со всеми моими целевыми файлами в каталоге dist/.
Итак, я начну с создания задачи Gulp.
gulp.task('рабочий процесс', функция () { глоток .src('./src/sass/**/*.scss') // Сюда вставляем задачи .pipe(gulp.dest('./dist/css/')) })
Путь /**/*.scss
означает, что задача применяется к этому или любому последующему каталогу ( src/sass/) с любым именем файла, заканчивающимся на . scss . Пункт назначения будет dist/css/.
Вставить все остальные плагины очень просто.
gulp.task('рабочий процесс', функция () { глоток .src('./src/sass/**/*.scss') .pipe(исходные карты.init()) .pipe(sass().on('ошибка', sass.logError)) .трубка( автопрефиксер({ браузеры: ['последние 2 версии'], каскад: ложный, }) ) .pipe(cssnano()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./dist/css/')) })
Каждый плагин будет иметь соответствующий файл readme на GitHub, в котором объясняется, как его использовать. Однако большинство из них весьма прямолинейны. Каждая задача Gulp находится в конвейерной функции. Выше вы можете видеть, что я инициирую исходные карты, запускаю Sass с ведением журнала ошибок, автопрефиксом для двух последних браузеров, минифицирую и записываю исходные карты в тот же каталог, что и выходной CSS.
Наконец, я собираюсь определить задачу Gulp по умолчанию как задачу «наблюдать» — Gulp будет следить за любыми изменениями в указанном мной каталоге и запускаться, если какие-либо изменения были сделаны.
gulp.task('по умолчанию', функция () { gulp.watch('./src/sass/**/*.scss', ['рабочий процесс']) })
Вот окончательный вариант gulpfile.js :
'use strict' вар глоток = требуется('глоток') var sass = требуется ('глоток-дерзость') вар cssnano = требуется ('gulp-cssnano') var sourcemaps = require('gulp-sourcemaps') var autoprefixer = require('gulp-autoprefixer') gulp.task('рабочий процесс', функция () { глоток .src('./src/sass/**/*.scss') .pipe(исходные карты.init()) .pipe(sass().on('ошибка', sass.logError)) .трубка( автопрефиксер({ браузеры: ['последние 2 версии'], каскад: ложный, }) ) .pipe(cssnano()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./dist/css/')) }) gulp.task('по умолчанию', функция () { gulp.watch('./src/sass/**/*.scss', ['рабочий процесс']) })
Теперь, чтобы протестировать этот код, я создам три простых файла .scss
— main.scss , _variables. scss и _scaffolding.scss .
Основной
/* Основной файл SCSS */ // База @импортировать "переменные"; // Составные части @import "строительные леса";
Переменные
// Типография $font-style: обычный; Вариант $font: нормальный; $font-weight: обычный; $font-color: #222; $размер шрифта: 1rem; $line-height: 1,5; $font-family: Helvetica Neue, Helvetica, Arial, без засечек;
Леса
// Определить типографику HTML { шрифт: $font-style $font-variant $font-weight #{$font-size}/#{$line-height} $ семейство шрифтов; } // Вертикально центрировать что-либо .вертикальный центр { дисплей: гибкий; выравнивание элементов: по центру; выравнивание содержимого: по центру; }
Хорошо, этого должно быть достаточно, чтобы настроить и убедиться, что autoprefixer и cssnano работают правильно. Обратите внимание, что я не создавал папку dist/ — Gulp сделает это за меня.
Все, что вам нужно сделать сейчас, это ввести команду gulp
в корне каталога вашего проекта.
[00:12:04] Использование gulpfile ~/Sites/startgulp/gulpfile.js [00:12:04] Запуск "по умолчанию"... [00:12:04] Завершено «по умолчанию» через 16 мс
Теперь, если я сохраню любой из созданных мной файлов .scss …
[00:12:39] Запуск «рабочего процесса» ... [00:12:39] Завершенный «рабочий процесс» через 32 мс
С молниеносной скоростью Gulp создал dist, мой основной файл CSS и исходную карту для него.
А вот как выглядит вывод.
Ты сделал это!
Заключение
Gulp может делать гораздо больше — в частности, я не учел какие-либо виды минимизации или анализа JavaScript — но что касается внешнего интерфейса Sass, это очень полезно и эффективно!
Если вы хотите поиграть с реальным примером точного рабочего процесса Gulp из этого руководства, не стесняйтесь проверить мой личный шаблон Sass.