Gulpfile js: JavaScript and Gulpfiles | gulp.js

Содержание

gulp@0 — задача gulp v0

Twitter LinkedIn Facebook Адрес электронной почты

  • Статья
  • Чтение занимает 4 мин

Запустите gulp Node. js систему сборки на основе задач потоковой передачи.

Node.js системе сборки на основе задач потоковой передачи.

Синтаксис

# gulp v0
# Run the gulp Node.js streaming task-based build system.
- task: gulp@0
  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: Gulp@0
  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Путь к файлу gulp
string. Обязательный. Значение по умолчанию: gulpfile.js.

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


gulpFileПуть к файлу Gulp
string. Обязательный. Значение по умолчанию: gulpfile.js.

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


targetsЗадачи gulp
string.

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


targetsЗадачи Gulp
string.

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


argumentsАргументы
string.

Дополнительные аргументы, передаваемые gulp. —gulpfile не требуется, так как он уже добавлен с помощью входных данных gulpFile выше.


workingDirectoryРабочий каталог
Псевдоним ввода: cwd. string.

Текущий рабочий каталог при запуске скрипта. По умолчанию используется папка, в которой находится скрипт.


gulpjs расположениеgulp.js
string. Обязательный. Значение по умолчанию: node_modules/gulp/bin/gulp.js.

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


publishJUnitResultsПубликация в Azure Pipelines
boolean. Значение по умолчанию: false.

Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой Gulp в Azure Pipelines/TFS.


publishJUnitResultsПубликация в Azure Pipelines/TFS
boolean. Значение по умолчанию: false.

Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой Gulp в Azure Pipelines/TFS.


publishJUnitResultsПубликация в TFS/Team Services
boolean. Значение по умолчанию: 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: Npm@1
  inputs:
    command: 'install'
- task: gulp@0
  inputs:
    gulpFile: 'gulpfile.js'
    gulpjs: 'node_modules/gulp/bin/gulp.js'

Создание приложения Node.

js
  • Создание приложения Node.js с помощью gulp

Требования

ТребованиеОписание
Типы конвейеровYAML, классическая сборка
Выполняется вAgent, DeploymentGroup
ТребованияЛокальные агенты должны иметь возможности , соответствующие следующим требованиям для выполнения заданий, использующих эту задачу: node.js
CapabilitiesЭта задача не удовлетворяет требованиям к последующим задачам в задании.
Ограничения командЛюбой
Переменные settableЛюбой
Версия агента
1.91.0 или более поздней версии
Категория задачСборка

Видео курс Верстка страниц с использованием Gulp. Подготовка gulpfile.js

  • org/ListItem»> Главная >
  • Каталог >
  • Верстка страниц с использованием 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

. js для получения определений задач. Выберите путь из выпадающего списка или нажмите кнопку и выберите файл в открывшемся диалоговом окне.

Задачи

В этом поле укажите задачи для выполнения. Выполните одно из следующих действий:

  • Чтобы запустить одну задачу, выберите ее из раскрывающегося списка.

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

Аргументы

В этом текстовом поле укажите аргументы для выполнения задач. Используйте формат --<имя_параметра> <значение_параметра> , например: --env development . Узнайте больше на официальном сайте Gulp.

Интерпретатор узла

В этом поле укажите используемый интерпретатор Node.js. Это может быть локальный интерпретатор Node.js или Node.js в подсистеме Windows для Linux.

Параметры узла

В этом текстовом поле введите специфичные для Node.js параметры командной строки, которые необходимо передать в исполняемый файл Node.js.

В конфигурации по умолчанию введите --harmony в это текстовое поле, чтобы DataSpell построил дерево задач в соответствии с Gulpfile.js, написанным на ECMA6.

Технически DataSpell вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Это делается бесшумно и не требует никаких действий с вашей стороны. Однако, если ваш Gulpfile.js написан на ECMA6, DataSpell по умолчанию не распознает этот формат и не может построить дерево задач. Чтобы решить эту проблему, укажите --harmony в качестве параметра узла конфигурации запуска Gulp.js по умолчанию.

Пакет gulp

В этом поле укажите путь к пакету gulp, установленному локально, в корне проекта.

Переменные среды

В этом поле укажите переменные среды для исполняемого файла Node. js, если применимо. Щелкните Обзор справа от поля и настройте список переменных в открывшемся диалоговом окне Переменные среды:

  • Чтобы определить новую переменную, щелкните и укажите имя и значение переменной.

  • Чтобы отменить определение переменной, выберите его в списке и нажмите .

  • Нажмите OK, когда будете готовы. каталогов с префиксом пути поиска модуля.

  • NODE_MODULE_CONTEXTS : Установите значение 1, чтобы загружать модули в их собственных глобальных контекстах.

  • NODE_DISABLE_COLORS : Установите значение 1, чтобы отключить цвета в REPL.

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:

  • Запустить внешний инструмент: выберите для запуска внешнего приложения. В открывшемся диалоговом окне выберите одно или несколько приложений, которые хотите запустить. Если он еще не определен в DataSpell, добавьте его определение.

  • Запустить другую конфигурацию: выберите для выполнения другой конфигурации запуска/отладки и дождитесь ее завершения перед запуском текущей конфигурации. Если вы хотите запустить несколько конфигураций параллельно, используйте конфигурацию составного запуска.

  • Запустить наблюдатели за файлами: выберите этот параметр, чтобы DataSpell применил все активные в данный момент наблюдатели за файлами.

  • Запустить задачу Grunt: выберите этот параметр, чтобы запустить задачу Grunt.

    В открывшемся диалоговом окне задачи Grunt укажите файл Gruntfile.js, в котором определена требуемая задача, выберите задачу для выполнения и укажите аргументы для передачи инструменту Grunt.

    Укажите расположение интерпретатора Node.js, параметры для передачи ему и путь к пакету grunt-cli.

  • Запустить задачу Gulp: выберите этот параметр, чтобы запустить задачу Gulp.

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

    Укажите расположение интерпретатора Node.js, параметры для передачи ему и путь к пакету gulp.

  • Запустить сценарий npm: выберите этот параметр, чтобы выполнить сценарий npm.

    В открывшемся диалоговом окне «Сценарий NPM» укажите параметры конфигурации запуска/отладки npm.

  • Компиляция TypeScript: выберите, чтобы запустить встроенный компилятор TypeScript и, таким образом, убедиться, что все изменения, внесенные вами в ваш код TypeScript, отражены в сгенерированных файлах JavaScript. В открывшемся диалоговом окне «Настройки компиляции TypeScript» установите или снимите флажок «Проверять ошибки», чтобы настроить поведение компилятора в случае обнаружения ошибок:

    • Если установлен флажок Проверять ошибки, компилятор покажет все ошибки и конфигурация запуска не запустится.

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

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. Я перечисляю шаги, чтобы вы знали, во что ввязываетесь.

  1. Установить инструменты командной строки Xcode
  2. Установить доморощенный
  3. Установить Node.js
  4. Установить Gulp глобально
  5. Установить Node и Gulp локально
  6. Установить плагины Gulp
  7. Настроить проект

Есть много способов сделать это, но мы собираемся сделать именно так.

Примечание. В версии 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.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *