Содержание

Установка Gulp

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

В этом нам поможет официальный сайт:

https://gulpjs.com

И на первом экране вы можете видеть, собственно, всю инструкцию по установке. По сути, это 3 строки, которые нужно будет ввести в командную строку. 

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

Открываем командную строку и выполняем следующую команду:

npm install gulp-cli -g

Это команда глобально установит в нашу операционную систему gulp для командной строки и после этого в командной строке должна стать доступной команда gulp.

Проверить, что у вас все работает, можно набрав:

gulp -v

и должна отобразиться текущая версия установленной gulp-cli.

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

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

Если мы создаем какую-то папку для нового проекта, мы должны установить для этого проекта систему Gulp. 

Переходим в папку нашего проекта с помощью команды cd путь_до_папки_проекта.

И нам нужно установить в эту папку уже локальную версию системы Gulp т.е. само ядро, к которой будут присоединятся модули и будет формироваться какой-то проект.

Выполняем команду:

npm install gulp -D

После этого у нас появляется папка node_modules, в которой располагаются все пакеты, которые нужны для работы Gulp.

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

npx -p touch nodetouch gulpfile.js

Это основной настроечный файл, в котором пишутся команды, которые будет выполнять Gulp. Именно с ним мы будем работать в следующих уроках. 

По сути это весь процесс установки. Для каждого нового проекта будет создаваться такая структура папок. 

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

Установка node + gulp для Windows 10

Вы здесь: Главная — JavaScript — JavaScript Основы — Установка node + gulp для Windows 10

Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент

node js, как пакетный менеджер.

Установка node js

Скачиваем на сайте nodejs.org стабильную версию Node, рекомендованную для большинства пользователей. Система автоматически определит вашу операционную систему и выдаст подходящую ссылку на скачивание.


После скачивания запускаем установщик и делаем все, как на скриншотах.




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



Как запустить консоль Windows 10 PowerShell

Работа на платформе node js ведется через npm команды, вводимые в консоль. У Windows 10

имеется встроенная консоль PowerShell, чтобы консоль запустилась, нужно зайти в папку проекта и зажав сочетание клавиш CTRL+SHIFT, выбрать из контекстного меню «Открыть окно PowerShell здесь».




Узнать версию node js

Для того чтобы убедится установился ли node js, проверяем его версию. Вводим в консоли команду node -v, если в ответ вы увидите название версии v.12.16.1, значит все в порядке. Делает такую же проверку и для npm. Команда npm -v должна вернуть номер версии 6.13.4. Все проверяемые номера версий актуальны на момент выхода этой статьи, у вас скорее всего будут уже другие номера версий.

Установка Gulp под Windows 10

Переходим на сайт gulpjs, запускаем в консоли команду npm install gulp-cli -g. Данная команда устанавливает Gulp глобально, то есть запускать его можно из любой папки на компьютере. Вроде как Gulp установился, но при проверки версии gulp -v, мы видим следующую картину. Что-то пошло не так.



Ошибка при установки Gulp

Система нам говорит (смотрим сообщение в консоли), что невозможно загрузить файл (gulp.ps1 cannot be loaded because running scripts is disabled) и предлагает почитать статью на сайте Microsoft о Политиках исполнения. Из статьи становится понятно, что политика выполнения PowerShell практикуется только на платформах Windows. Блокируется запуск скриптов с расширением

.ps1. Что делать в таком случае? Меняем дефолтные настройки Windows через командную строку PowerShell.

  1. Запускаем PowerShell от имени администратора
  2. Проверяем текущие параметры для политики выполнения: Get-ExecutionPolicy -List
  3. Устанавливаем требуемый уровень (меняем политику выполнения) Set-ExecutionPolicy -Scope LocalMachine Unrestricted
  4. Проверяем версию Gulp, если после ввода gulp -v, вы видите CLI version: 2.2.0, значит установка прошла успешно.

Существенное дополнение

Если вы пишите код в редакторе VS Code, то вам вообще не нужна никакая консоль. У редактора имеется встроенный терминал, как раз для ввода различных команд. Больше не надо переключаться между отдельными вкладками, когда все в одном месте.

  • Создано 11.03.2020 10:16:42
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Gulp — Установка — CoderLessons.com

Эта статья содержит пошаговую процедуру установки Gulp.

Системные требования для Gulp

  • Операционная система — кроссплатформенная

  • Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Операционная система — кроссплатформенная

Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Установка Гульпа

Шаг 1 — Нам нужен Node.js для запуска примеров Gulp. Чтобы скачать Node.js, откройте https://nodejs.org/en/ , вы увидите экран, как показано ниже —

Загрузите последнюю версию Zip-файла.

Шаг 2 — Затем запустите программу установки, чтобы установить NodeJ на ваш компьютер.

Шаг 3 — Вам необходимо установить переменные среды.

Путь пользователя переменная

  • Щелкните правой кнопкой мыши на Мой компьютер.
  • Выберите Свойства.
  • Выберите вкладку «Дополнительно» и нажмите «Переменные среды».

В окне «Переменные среды» дважды щелкните ПУТЬ, как показано на следующем экране.

  • Вы получите окно редактирования пользовательской переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле Значение переменной как C: \ Program Files \ nodejs \ node_modules \ npm. Если путь уже задан для других файлов, вам необходимо поставить точку с запятой (;) и добавить путь Node.js, как показано на следующем снимке экрана.

Вы получите окно редактирования пользовательской переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле Значение переменной как C: \ Program Files \ nodejs \ node_modules \ npm. Если путь уже задан для других файлов, вам необходимо поставить точку с запятой (;) и добавить путь Node.js, как показано на следующем снимке экрана.

В конце нажмите кнопку «ОК».

Системная переменная

В разделе «Системные переменные» дважды щелкните «Путь», как показано на следующем экране.

  • Вы получите окно редактирования системной переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле «Значение переменной» как C: \ Program Files \ nodejs \ и нажмите «ОК», как показано на следующем снимке экрана.

Вы получите окно редактирования системной переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле «Значение переменной» как C: \ Program Files \ nodejs \ и нажмите «ОК», как показано на следующем снимке экрана.

Шаг 4 — Откройте командную строку в вашей системе и введите следующую команду. Он отобразит установленную версию Node.js.

node -v

Шаг 5 — В командной строке введите следующую команду, чтобы отобразить версию npm (менеджер пакетов Node.js), которая используется для установки модулей. Он отобразит установленную версию Node.js.

npm -v

Шаг 6 — В командной строке введите следующую команду, чтобы установить Gulp. Добавление флага «-g» обеспечивает глобальную доступность Gulp для любого проекта.

npm install gulp -g

Шаг 7 — Чтобы убедиться, что Gulp был успешно установлен, введите следующую команду, чтобы отобразить версию Gulp.

gulp -v

Использование Gulp. Часть 1 — Установка.

Чтобы ускорить процесс фронтенд-разработки, мы автоматизируем выполнение некоторых задач с помощью сборщика Gulp.
Для этого нам понадобится пакетный менеджер NPM. Но, чтобы установить NPM, сначала надо установить Node.js.

Шаг 1. Установка Node
Заходим на официальный сайт https://nodejs.org и скачиваем рекомендованную версию.

Инсталлятор запускать с правами администратора.
После установки появятся 2 значка: Node.js и командная консоль Node.js coomand prompt. Нам они не пригодятся, так как мы не используем Node.js, а для запуска консоли есть более удобные варианты:
1. Использовать Командную консоль TotalCommander (Команды — Открыть командную консоль).
2. Зажать Shift и, кликнув правой кнопкой, открыть контекстное меню. В нем появится пункт «Открыть окно команд».
Запуск коммандной строки лучше производить, находясь в директории нужного вам проекта, в консоли сразу отобразится путь к нужной директории, это избавит от необходимости вводить путь вручную.

Для проверки версий node и npm наберите в командной строке
node -v и нажмите Enter
затем npm -v

Версии NPM обновляются обычно чаще, чем версии node, чтобы установить последнюю версию:
npm install [email protected] -g

Комманды npm, которые нам пригодятся :
npm list — список всех установленных пакетов
npm -g ls —depth=0 — список глобально установленнных пакетов
npm outdated проверить, не устарели ли пакеты
npm update gulp — обновление версий плагинов
npm init — создать package.json
npm install package_name — установить пакет (package_name — название нужного пакета)
npm install package_name —save-dev — установить пакет и вносит запись о нем в package.json в секцию devDependencies
npm uninstall  package_name — удаление пакета
npm install — установить все пакеты, перечисленные в package.json
Перед запуском в продакшн npm shrinkwrap — фиксируем версии пакетов,теперь npm install будет устанавливать именно их и вы будете уверены что все будет работать как надо

Сокращения
-v: —version
-g: —global
-S: —save
-D: —save-dev
-y: —yes
-n: —yes false

Шаг 2. Установка gulp
Сначала gulp надо установить глобально.

Запускаем командную консоль.
Иногда на некоторых ресурсах перед коммандой стоит значок доллара, например 
$ npm install —global gulp-cli

Значок доллара не копировать, вставлять только саму комманду
npm install —global gulp-cli

Подсказка: чтобы вставлять скопированный текст в командную строку, открыть ком.строку, нажать ALT + SPACE -> Значения по умолчанию, поставить галочку Выделение мышью. Теперь можно выделить текст мышкой, скопировать, в ком. строке кликнуть правой кнопкой — текст вставится автоматически.


Шаг 3. Работа с gulp в конкретном проекте

3.1 Сначала создадим пакет зависимостей package.json
Файл package.json содержит информацию, которую мы внесем в терминале и список всех пакетов, которые мы используем в проекте.

При установке пакета с ключом —save-dev, пакет автоматически добавляется в package.json. Чтобы не устанавливать в каждом новом проекте все пакеты вручную, мы будем использовать уже готовый package.json с небходимыми нам модулями и зависимостями, расположив его в корне нашего проекта.

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

Подсказка:
Вы можете сгенерировать это файл быстрее и проще, используя опцию —yes (автоматический ответ “да” на все вопросы):
npm init —yes

Полезно знать:
Вы можете установить значения по умолчанию, которые будут использоваться при каждом запуске npm init, а значит будут экономить вам время. После установки они сохраняются в .npmrc файлах.
Например:
npm config set init.author.name «Valentina Vladova»
npm config set init.author.email «[email protected]»
npm config set init.author.url «http://simpalmarket.com/»
npm set init-license MIT
npm set init-version 0.0.0
Затем запустить npm init, все указанные значения подтянутся в соответстующие переменные.

Когда npm init спросит про гит-репозиторий, пишите кратко user/repo — npm достаточно умён, чтобы раскрыть строчку в https://github.com/user/repo. npm также сгенерирует поля repository, bugs и homepage в нужном формате.

Итак, заходим в корневую папку проекта, вызываем командную консоль и набираем
npm init —yes

В корне проекта появится файл package.3.9.1″
}

Теперь можно устанавливать различные плагины для gulp.
http://gulpjs.com/plugins/
В поле поиска вводите название интересующего плагина.

Плагины можно устанавливать как по одному, например:
npm install —save-dev gulp-plumber
так и списком через пробел, например:
npm install gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css —save-dev
Плагины для установки и плагины для сборки лучше устанавливать отдельными командами

Для установки конкретной версии используйте @, т.е. плагин@номер весии. Пример:
npm install —save-dev [email protected]

 

npm глобальная установка не распознана (gulp)



Я пытаюсь использовать gulp в первый раз.

Следуя инструкциям в Интернете, я установил его как глобально, так и локально, но все равно получаю ошибку 'gulp' is not recognized as an internal or external command[...] . При использовании PowerShell вместо cmd ошибка равна the term 'gulp' is not recognized as the name of a cmdlet, function, script file[...]

Я пытался:

  • установка gulp-cli в дополнение к gulp
  • добавление / изменение переменных PATH
  • перезапуск моего PC
  • запуск npm install -g [email protected] , чтобы убедиться, что npm-это up-to-date

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

node.js npm gulp
Поделиться Источник asher     11 августа 2020 в 18:33

2 ответа


  • Локальная установка gulp не найдена даже после установки npm install -g gulp

    Я попытался установить gulp by npm install -g gulp Выход, кажется, что-то вроде этого. (я пропустил несколько журналов) npm http 304 https://registry.npmjs.org/string_decoder npm http 304 https://registry.npmjs.org/lodash._htmlescapes /usr/bin/gulp -> /usr/lib/node_modules/gulp/bin/gulp.js…

  • npm глобальной gulp установить

    Пожалуйста, помогите мне. Я только начинаю изучать gulp и terminal, я не могу установить grobal gulp на свой Mac. Я пытался все по-другому исправить, но это вызвало еще больше проблем.. npm ERR! Darwin 14.5.0 npm ERR! argv node /usr/local/bin/npm i -g gulp npm ERR! node v0.12.7 npm ERR! npm…



0

«Global install» с флагом -g в основном означает, что вы устанавливаете команду, поставляемую вместе с пакетом.

Чтобы глобально установить gulp:

npm install gulp -g

Поделиться yummypasta     12 августа 2020 в 05:47



0

Вы можете добавить сценарий gulp в файл package.json и выполнить команду gulp с помощью npm.

Экс:

  • gulp имя задачи : helloTest
  • Добавьте ниже код в package.json:
 "scripts": {
     
        "helloTest": "gulp helloTest",
  }

А теперь введите следующую команду в terminal:

npm запустить helloTest

Поделиться Anushil Kumar     05 сентября 2020 в 13:24


Похожие вопросы:


Установка gulp с npm

я пытаюсь установить gulp через npm на DigitalOcean droplet со следующей командой (с sudo и без него): npm install -g gulp и я получаю ошибки, которые не могу понять: > [email protected] install…


`npm run gulp` не может найти модуль ‘gulp-shell’?

Я удалил папку node modules и установил npm с помощью команды npm install . Мой gulpfile.js также идеален, потому что другие люди прекрасно работают с этой конфигурацией, даже я сделал это с этой…


npm установить —g gulp-зависает

Windows PowerShell Copyright (C) 2014 Microsoft Corporation. All rights reserved. PS C:\Windows\system32> npm install —g gulp npm ERR! Windows_NT 6.3.9600 npm ERR! argv C:\\Program…


Локальная установка gulp не найдена даже после установки npm install -g gulp

Я попытался установить gulp by npm install -g gulp Выход, кажется, что-то вроде этого. (я пропустил несколько журналов) npm http 304 https://registry.npmjs.org/string_decoder npm http 304…


npm глобальной gulp установить

Пожалуйста, помогите мне. Я только начинаю изучать gulp и terminal, я не могу установить grobal gulp на свой Mac. Я пытался все по-другому исправить, но это вызвало еще больше проблем.. npm ERR!…


NPM автоматическая установка gulp компонентов

Я настраиваю gulp для выполнения задач с моими файлами JS в устаревшем проекте .NET WebForms. Я установил NPM, который затем использовал для установки Gulp, и я могу успешно запустить gulp, который…


Семантический пользовательский интерфейс/npm проблемы/gulp установка

хорошо так что пока я делал некоторую семантическую установку каждый раз когда я что то пробую я получаю ошибки npm установка -g gulp npm ERR! error rolling back Error: EACCES, unlink…


npm типизация не распознана командой

Поэтому я установил Typings глобально с npm install -g typings Я убедился, что C:\Users\{username}\AppData\Roaming\npm находится на моем пути. Я могу заставить его работать после перезагрузки, но…


Запуск Gulp через NPM?

Этот учебник работает с Gulp по NPM следующим образом: // package.json scripts: { gulp: ./node_modules/gulp/bin/gulp.js }, // in your terminal, instead of using gulp, use npm run gulp npm run gulp…


Gulp команда не найдена

Я попытался установить Gulp с помощью NPM, но команда gulp не распознается. Это команды, которые я выполнил. Я использую Git Bash и запускаю его как администратор. Я использую Windows 10. npm…

Установка gulp на windows 10



Я установил gulp

npm install --global gulp

и установите переменную envidoment:

 - variable: GULP_HOME
 - Value: C:\Users\myaccount\AppData\Roaming\npm\node_modules\gulp  (..\gulp is folder)

в переменных окружения И попробуйте запустить «gulp». Затем я получаю сообщение в cmd:

C:\myaccount\workspace\todoparrot>gulp
[09:47:24] Local gulp not found in C:\myaccount\workspace\todoparrot

Как настроить gulp на работу?

node.js windows gulp
Поделиться Источник user2301515     10 октября 2015 в 06:54

2 ответа


  • Установка gulp-imagemin на Windows создает более 10 000 файлов

    Я установил gulp-imagemin на свой ноутбук Windows 7 с помощью npm install —save-dev gulp-imagemin и после длительного процесса в итоге получилась папка с более чем 10 000 файлами и некоторыми очень глубокими структурами папок. Кто-нибудь еще это видел? Вероятно ли это будет правильно или я буду…

  • gulp-препроцесс и переменные окружения на Windows 10

    Я создаю JS-приложение на OSX и Windows 10, оба работают под управлением Node.js v4.2.x. Как часть моего процесса сборки я выполняю BUILD_TYPE={my-build-type} gulp build Который строит определенную конфигурацию моего приложения, используя gulp-preprocess . Соответствующая часть моего файла gulp…



15

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

npm install gulp

если он не исправлен, попробуйте установить его глобально:

npm install gulp-cli -g

Поделиться fsf     11 ноября 2015 в 03:36



3

Я установил gulp глобально, а затем использовал команду link, чтобы связать текущий каталог с глобальной установкой. Я использовал команду —

npm ссылка gulp

Поделиться cs123     27 сентября 2016 в 00:56


Похожие вопросы:


Проблемы с установкой GULP на Windows 10 в качестве ограниченного пользователя

Я пытаюсь установить gulp на свою машину development Windows 10 Pro, и она не работает. Я установил node.js, и когда я использую свою учетную запись администратора, я могу запустить gulp. Однако,…


gulp команда не работает на laravel Elixir на windows

Я пытался запустить команду gulp в команде windows после установки node_modules в моей установке laravel, но она вернулась с этой ошибкой в моей командной строке windows :- ‘gulp’ не распознается…


Ошибка запуска gulp на Windows 10

Я запускаю Windows 10 build 10576 (последняя версия) и получаю ошибку при запуске gulp из корневой папки моего проекта(или где-либо еще). Вот скриншот ошибки: http://puu.sh/l3mLf/522a4e6dbe.png…


Установка gulp-imagemin на Windows создает более 10 000 файлов

Я установил gulp-imagemin на свой ноутбук Windows 7 с помощью npm install —save-dev gulp-imagemin и после длительного процесса в итоге получилась папка с более чем 10 000 файлами и некоторыми очень…


gulp-препроцесс и переменные окружения на Windows 10

Я создаю JS-приложение на OSX и Windows 10, оба работают под управлением Node.js v4.2.x. Как часть моего процесса сборки я выполняю BUILD_TYPE={my-build-type} gulp build Который строит определенную…


Не удается установить gulp на windows 10

Я занят изучением Laravel и в процессе пытаюсь установить gulp. Операционная система: Windows 10 В командной строке: npm -v дает: 2.15.2 узел -v дает: v4.4.5 Затем я перепробовал все способы,…


Установка WinPcap на Windows 10

я whant, чтобы установить утилита WinPcap на окно 10, но я получаю ошибку ————————— WinPcap 4.1.3 настройка ————————— эта версия Windows не поддерживается WinPcap…


Запуск gulp и установка среды в Windows

Я использую Windows 10 Pro. Недавно я сменил Ubuntu на Windows 64-bit. В Ubuntu я запустил node.js приложение, установив переменную окружения и используя node.js пакет gulp . Теперь я не знаю, как…


Gulp задач выбрасывают ошибку на Win 10

У меня есть windows 10 Pro, выполняющий упражнение отсюда https://vk.com/video-160048630_456239048? list=b31c949319120bc599 Установили gulp, gulp-меньше, gulp-уведомить, gulp-сантехник. Я создал…


установка Redmine на на windows 10 этому искусству

Привет я пытаюсь установить Redmine на на windows 10 ,я пробовал установить с Bitnami и это есть ошибка о установка камней любой один, дайте мне решение по установке Redmine на на windows 10. я…

16. Установка NPM и модулей Gulp Основы Web-дизайна. Фронтэнд

16. Установка NPM и модулей Gulp

(В инструкциях, связанных с Gulp, подразумевается, что вы пользуетесь Windows 7+)
В первую очередь, чтобы Gulp работал, нужно установить менеджер пакетов NPM. Он входит в состав node.js. Поэтому идём на сайт node.js и скачиваем установщик: nodejs.org. Рекомендую ставить LTS — версию. На данный момент последняя LTS версия — 8.11.1. Ее мы скачиваем и устанавливаем, как обычное приложение. Самое главное на этапе выбора модулей установить флажок рядом с NPM. Обычно он уже установлен, но лучше проверить.
Следующим этапом нужно запустить командную строку и установить Gulp глобально
Здесь и далее выделенный курсивом текст будет означать, то что его нужно прописать в командной строке.
npm install gulp -g
Отлично, когда Gulp установлен глобально, нужно установить его в папку с проектом. Для этого переходим в нашу папку (разумеется в командной строке):
cd путь/до/папки/с/проектом
Путь можно скопировать из Проводника. Теперь нужно инициализировать проект:
npm init
Заполняем сведения о проекте (на английском языке, иначе выдаст ошибку. В имени не допускаются пробелы и заглавные буквы), которые в последствии запишутся в файл package.json в директории проекта
1. Имя
2. Описание (можно оставить пустым)
3. Номер версии (можно оставить пустым)
4. Входная точка (можно оставить пустым)
5. Репозиторий на GitHub (можно оставить пустым)
6. Лицензия (можно оставить пустым).
Теперь нужно создать файл gulpfile.js в директории проекта.
Следующим шагом установим Gulp локально в проект:
npm install gulpsavedev
Последнее, что нужно сделать перед настройкой gulpfile.js, это установить необходимые плагины:

© Даниил Голубев,
книга «Основы Web-дизайна. Фронтэнд».

Концепции API

| gulp.js

Следующие концепции являются предпосылками для понимания документации API. На них будут ссылаться повсюду, вернитесь к этой странице для подробных объяснений.

Если вы здесь новичок, начните с Руководства по началу работы.

Винил #

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

Виниловые адаптеры #

Хотя Vinyl позволяет описывать файл, необходим способ доступа к этим файлам. Доступ к каждому источнику файла осуществляется с помощью адаптера Vinyl.

Адаптер предоставляет:

  • Метод с сигнатурой src (globs, [options]) и возвращает поток, который создает объекты Vinyl.
  • Метод с подписью dest (folder, [options]) и возвращает поток, который потребляет объекты Vinyl.
  • Любые дополнительные методы, специфичные для их среды ввода / вывода, такие как символьная ссылка метод vinyl-fs .Они всегда должны возвращать потоки, которые производят и / или потребляют объекты Vinyl.

Задачи #

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

Более подробное объяснение см. В разделе «Создание задач».

Globs #

Glob — это строка букв и / или подстановочных знаков, например * , ** или ! , используется для сопоставления путей к файлам.Globbing — это поиск файлов в файловой системе с помощью одного или нескольких глобусов.

Если у вас нет опыта работы с глобусами, см. «Объяснение глобусов».

База глобуса #

База глобуса — иногда называемая родительским элементом глобуса — это сегмент пути перед любыми специальными символами в строке глобуса. Таким образом, база глобуса /src/js/**.js равна / src / js / . Все пути, соответствующие глобу, гарантированно имеют общую базу глобуса — этот сегмент пути не может быть переменным.

Экземпляры Vinyl, генерируемые src () , создаются с базовым набором glob в качестве их свойства base .При записи в файловую систему с помощью dest () базовый будет удален из пути вывода для сохранения структуры каталогов.

Для получения более подробной информации см. Родительский репозиторий glob.

Статистика файловой системы #

Метаданные файла предоставляются как экземпляр fs.Stats узла. Он доступен как свойство stat в ваших экземплярах Vinyl и используется внутри компании, чтобы определить, представляет ли объект Vinyl каталог или символическую ссылку.При записи в файловую систему разрешения и значения времени синхронизируются из свойства stat объекта Vinyl.

Режимы файловой системы #

Режимы файловой системы определяют, какие разрешения существуют для файла. Большинство файлов и каталогов в вашей файловой системе будут иметь достаточно разрешительный режим, позволяющий gulp читать / записывать / обновлять файлы от вашего имени. По умолчанию gulp создает файлы с теми же разрешениями, что и запущенный процесс, но вы можете настроить режимы с помощью параметров в src () , dest () и т. Д.Если у вас возникли проблемы с разрешением (EPERM), проверьте режимы в своих файлах.

Модули #

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

Если у вас возникли проблемы, убедитесь, что ваши текущие модули обновлены с помощью команды npm update .Если проблема не исчезнет, ​​откройте вопрос в репозитории отдельного проекта.

  • гробовщик - система регистрации задач
  • винил - виртуальные файловые объекты
  • vinyl-fs - виниловый адаптер к вашей локальной файловой системе
  • glob-watcher - файловый наблюдатель
  • bach - оркестровка задач с использованием серии ) и parallel ()
  • last-run - отслеживает время последнего выполнения задачи
  • vinyl-sourcemap - встроенная поддержка исходной карты
  • gulp-cli - интерфейс командной строки для взаимодействия с gulp

gulp-install - npm

Автоматическая установка пакетов / зависимостей npm, bower, tsd, typings, composer и pip, если соответствующие конфигурации находятся в потоке файла gulp соответственно

Файл найден Выполнение команды
упаковка.json npm установить
bower.json установка беседки
tsd.json tsd переустановить - сохранить
typings.json наборов установить
composer.json композитор установить
requirements.txt pip install -r требования.txt

Он запустит команду в каталоге, в котором находит файл, поэтому, если у вас есть конфигурации, вложенные в более низкий каталог, чем ваш slushfile.js / gulpfile.js , это все равно будет работать.

ПРИМЕЧАНИЕ начиная с v1.0.0 gulp-install требует как минимум NodeJS v6.

Основная цель

Используется в качестве шага установки при использовании slush в качестве замены Yeoman.

Установка

Для глобального использования со слякотью

Установите gulp-install как зависимость:

 

npm install --save gulp-install

Для местного применения с глотком

Установите gulp-install как зависимость разработки:

 

npm install --save-dev gulp-install

Использование

В вашем slushfile

.js :
 

var install = require ("gulp-install");

gulp.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (install ());

В вашем

gulpfile.js :
 

var install = require ("gulp-install");

gulp.src (['./ bower.json', './package.json'])

.pipe (install ());

API

вводить ([параметры] [, обратный вызов])
Параметр Тип Описание
опции Объект Любой вариант
обратный звонок Функция Вызывается по завершении установки (не при сбоях)

Опции

Чтобы не запускать установку, используйте --skip-install в качестве параметра CLI при запуске slush или gulp .

вариантов.

<команда>

Тип: Массив | Строка | Объект

По умолчанию: null

Используйте эту опцию (ы), чтобы указать любые аргументы для любой команды, например:

 

var install = require ("gulp-install");

gulp.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (install ({

npm: '--production') ,

беседка: {allowRoot: true},

pip: ['--target', '.']

}));

опций. Команды

Тип: Объект

По умолчанию: null

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

 

var install = require ("gulp-install");

gulp.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (установить (команды {

: {

'пакет .json ':' yarn '

},

yarn: [' --extra ',' --args ',' --here ']

}));

опций. Производство

Тип: Логическое значение

По умолчанию: ложь

Установите значение true , если npm install следует добавить с параметром --production , если поток содержит package.json .

Пример:

 

var install = require ("gulp-install");

гл.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (установить ({production: true}));

options.ignore Скрипты

Тип: Логическое значение

По умолчанию: ложь

Установите значение true , если npm install следует добавить с параметром --ignore-scripts , если поток содержит package.json . Полезно для пропуска сценариев после установки с npm .

Пример:

 

var install = require ("gulp-install");

gulp.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (установить ({ignoreScripts: true}));

опций. Нет опций

Тип: Логическое значение

По умолчанию: ложь

Установите значение true , если npm install следует добавить с параметром --no-optional , который предотвратит установку дополнительных зависимостей.

Пример:

 

var install = require ("gulp-install");

gulp.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (install ({noOptional: true}));

options.allowRoot

Тип: Логическое значение

По умолчанию: ложь

Установите значение true , если bower install следует добавить с параметром --allow-root , если поток содержит bower.json .

Пример:

 

var install = require ("gulp-install");

gulp.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (install ({allowRoot: true}));

options.args

Тип: Массив или строка

По умолчанию: undefined

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

Пример:

 

var install = require ("gulp-install");

gulp.src (__ dirname + '/ templates / **')

.pipe (gulp.dest ('./'))

.pipe (install ({

args: ['dev', '- без усадочной пленки']}

));

Лицензия

Лицензия MIT

глотков | WebStorm

WebStorm интегрируется с Gulp.js Task Runner. WebStorm анализирует файлы Gulpfile.js, распознавая определения задач, показывает задачи в виде дерева, позволяет вам перемещаться между задачей в дереве и ее определением в Gulpfile.js и поддерживает выполнение и отладку задач.

Задачи Gulp.js можно запускать из дерева задач в специальном окне инструментов Gulp или из файла Gulpfile.js, запустив конфигурацию запуска Gulp.js, или как задачу перед запуском из другой конфигурации запуска. WebStorm показывает результат выполнения задачи в окне инструмента «Выполнить». Окно инструмента показывает вывод Grunt, сообщает о возникших ошибках, перечисляет пакеты или плагины, которые не были найдены, и т. Д. Имя последней выполненной задачи отображается в строке заголовка окна инструмента.

Перед началом работы

Убедитесь, что на вашем компьютере установлен Node.js.

Установка Gulp.js

Чтобы использовать Gulp в проекте WebStorm, вам понадобятся два пакета:

  • Глобально установленный пакет gulp-cli (интерфейс командной строки Gulp) для выполнения команд Gulp.

  • Пакет gulp, установленный в качестве зависимости разработки для построения дерева задач проекта и предоставления помощи при кодировании при редактировании файла Gulpfile.js. Узнайте больше о Gulpfile.js с официального сайта Gulp.js.

Чтобы установить gulp-cli глобально

  • Во встроенном Терминале ( Alt + F12 ) введите:

    npm install -global gulp-cli

Чтобы установить Gulp.js в project

  • Во встроенном терминале ( Alt + F12 ) введите:

    npm install gulp --save-dev

Вы также можете установить пакеты на Node.js и NPM, как описано в npm, pnpm и Yarn.

Запуск задач Gulp.js из дерева задач

WebStorm позволяет легко и быстро запускать задачи Gulp.js прямо из дерева задач в окне инструмента Gulp. WebStorm автоматически создает временную конфигурацию запуска, которую вы можете сохранить и использовать позже при необходимости.

Gulp.js начинает построение дерева задач, как только вы вызываете Gulp.js, выбирая «Показать задачи Gulp» в контекстном меню Gulpfile.js в окне инструмента «Проект» или в файле Gulpfile.js открыт в редакторе. Дерево построено в соответствии с файлом Gulpfile.js, для которого был вызван Gulp.js. Если в вашем проекте несколько файлов Gulpfile.js, вы можете построить отдельное дерево задач для каждого из них и запускать задачи, не отказываясь от ранее построенных деревьев задач. Каждое дерево отображается под отдельным узлом.

Технически WebStorm вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Делается это бесшумно и не требует никаких шагов с вашей стороны.

Чтобы открыть окно инструмента Gulp

Когда вы впервые строите дерево задач во время текущего сеанса WebStorm, окно инструмента Gulp еще не открывается.

По умолчанию WebStorm не распознает ES6 в Gulpfile.js и не может построить дерево задач. Чтобы решить эту проблему, обновите конфигурацию запуска Gulp.js по умолчанию.

Чтобы построить дерево задач из ES6 Gulpfile.js

  1. В главном меню выберите.

  2. В узле «Шаблоны» щелкните Gulp.js.

  3. В открывшемся диалоговом окне «Конфигурация запуска / отладки: Gulp.js» введите --harmony в поле «Параметры узла» и нажмите «ОК».

Чтобы построить дерево задач из окна инструмента Gulp

  • В окне инструмента Gulp щелкните на панели инструментов и выберите нужный файл Gulpfile.js из списка. По умолчанию WebStorm показывает файл Gulpfile.js в корне вашего проекта.

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

Для повторного построения дерева

Для сортировки задач в дереве по их именам

  • Щелкните на панели инструментов, выберите «Сортировать по» в меню, а затем выберите «Имя».
    По умолчанию дерево показывает задачи в том порядке, в котором они определены в Gulpfile.js (опция Порядок определения).

Для запуска задачи

Для запуска задачи по умолчанию

Для запуска нескольких задач

Для перехода к определению задачи

Запуск задач из Gulpfile.js

  1. Поместите курсор на определение задачу, которую нужно запустить, и в контекстном меню выберите «Выполнить <имя задачи>». WebStorm создает и запускает временную конфигурацию запуска с именем выбранной задачи.

  2. Чтобы сохранить автоматически созданную временную конфигурацию запуска, поместите курсор на определение задачи, для которой он был создан, и выберите Сохранить <имя задачи> в контекстном меню выбора.

Выполнение и отладка задач в соответствии с конфигурацией запуска

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

Чтобы создать конфигурацию запуска Gulp.js

  1. В главном меню выберите.

  2. Щелкните на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Запуск / отладка конфигурации: Gulp.js».

  3. Укажите имя конфигурации запуска, задачи для запуска (используйте пробелы в качестве разделителей), расположение Gulpfile.js, в котором определены эти задачи, и путь к пакету gulp, установленному в корне текущего проекта.

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

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

Для запуска задач

Для отладки задач

  1. Создайте конфигурацию запуска / отладки Gulp.js, как описано выше.

  2. Откройте файл Gulpfile.js в редакторе и при необходимости установите в нем точки останова.

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

  4. В открывшемся окне инструмента отладки проанализируйте выполнение приостановленной задачи, выполните пошаговое выполнение задачи и т. Д., Как описано в разделах «Проверка приостановленной программы» и «Пошаговое выполнение программы».

Чтобы запустить задачу Gulp как задачу перед запуском

  1. Откройте диалоговое окно «Запуск / отладка конфигураций», выбрав в главном меню, и выберите нужную конфигурацию из списка или создайте ее заново, щелкнув и выбрав значок соответствующий тип конфигурации запуска.

  2. В открывшемся диалоговом окне щелкните в области «Перед запуском» и выберите из списка «Запустить задачу Gulp».

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

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

Автоматический запуск задач Gulp.js

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

  1. В диалоговом окне «Параметры / настройки» Ctrl + Alt + S щелкните «Задачи при запуске» в разделе «Инструменты».

  2. На открывшейся странице Startup Tasks щелкните на панели инструментов.

  3. Из списка выберите необходимую конфигурацию запуска Gulp.js. Конфигурация добавлена ​​в список.

    Если в проекте нет подходящей конфигурации, щелкните и выберите «Редактировать конфигурации». Затем определите конфигурацию с необходимыми настройками в Run / Debug Configuration: Gulp.js открывается страница. При сохранении новой конфигурации она автоматически добавляется в список задач запуска.

Последнее изменение: 26 мая 2021 г.

Как перейти на Gulp.js 4.0

Несмотря на конкуренцию со стороны webpack и Parcel, Gulp.js остается одним из самых популярных средств запуска задач JavaScript. Gulp.js настраивается с использованием кода, что делает его универсальным вариантом общего назначения. Gulp.js может анализировать базу данных, отображать статический сайт, отправлять фиксацию Git и публиковать сообщение Slack с помощью одной команды, помимо обычной транспиляции, объединения и перезагрузки в реальном времени.Узнайте, как перейти на Gulp.js 4.0.

Для знакомства с Gulp взгляните на следующее:

Gulp.js 4.0

Gulp.js 3.x используется по умолчанию около полувека. До недавнего времени npm install gulp устанавливала 3.9.1 - версию, указанную в руководствах выше.

Gulp.js 4.0 был доступен все это время, но его нужно было явно установить с помощью npm install gulp @ next . Отчасти это произошло из-за продолжающейся разработки, а также из-за того, что Gulp.js 4 gulpfile.js файлы конфигурации несовместимы с файлами, разработанными для версии 3.

10 декабря 2018 г. Gulp.js 4.0 был объявлен по умолчанию и опубликован в npm. Любой, кто использует npm install gulp в новом проекте, получит версию 4.

Обязательно ли переходить на Gulp.js 4?

Нет. Gulp.js 3 устарел и вряд ли получит дальнейшие обновления, но его все еще можно использовать. Существующие проекты не будут обновлены, если версия не будет явно изменена в разделе dependencies пакета .3.9.1

Возможно, лучше придерживаться Gulp.js 3.x, если у вас особенно сложная критически важная система сборки.

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

Обновление до Gulp.js 4.0

Обновите зависимости package.json , как показано выше, затем запустите npm install для обновления.Вы также можете обновить интерфейс командной строки, используя npm i gulp-cli -g , хотя на момент написания это не изменилось.

Чтобы проверить установку, введите в командной строке gulp -v :

  $ глоток -v
[15:15:04] CLI версии 2.0.1
[15:15:04] Локальная версия 4.0.0
  

Перенос gulpfile.js

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

  AssertionError [ERR_ASSERTION]: должна быть указана функция задачи
  в Gulp.установить [как _setTask] (/node_modules/undertaker/lib/set-task.js:10:3)
  в Gulp.task (/node_modules/undertaker/lib/task.js:13:8)
  в /gulpfile.js:102:8
  в Object. <анонимный> (/gulpfile.js:146:3)
  в Module._compile (внутренний / модули / cjs / loader.js: 688: 30)
  в Object.Module._extensions..js (internal / modules / cjs / loader.js: 699: 10)
  в Module.load (internal / modules / cjs / loader.js: 598: 32)
  в tryModuleLoad (внутренний / модули / cjs / loader.js: 537: 12)
  в Function.Module._load (internal / modules / cjs / loader.4.0.0 / index.js: 36: 18)
  в Liftoff.handleArguments (/gulp-cli/index.js:175:63)
  в Liftoff.execute (/gulp-cli/node_modules/liftoff/index.js:203:12)
  в module.exports (/gulp-cli/node_modules/flagged-respawn/index.js:51:3)
  в Liftoff. <анонимный> (/gulp-cli/node_modules/liftoff/index.js:195:5)
  

Это сложно, но вы можете игнорировать все, кроме первой ссылки gulpfile.js , которая показывает строку, в которой обнаружена ошибка (102 в этом примере).

К счастью, большинство этих ошибок вызвано проблемами одного и того же типа. В следующих разделах в качестве примера используется код учебника по задачам CSS. Код доступен на GitHub и предоставляет исходный Gulp.js 3 gulpfile.js и перенесенный эквивалент Gulp.js 4.

Преобразование массивов задач в последовательные () вызовы

Gulp.js 3 позволяет указывать массивы синхронных задач. Обычно это использовалось, когда было инициировано событие watch или у задачи были зависимости.Например, запустите задачу изображений перед задачей css :

  gulp.task ('css', ['images'], () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build));

);
  

Gulp.js 4.0 представляет методы series () и parallel () для объединения задач:

Сложные задачи могут быть вложены на любой уровень - чего было бы трудно достичь в Gulp.js 3. Например, запустите задачи a и b параллельно, а затем, когда оба будут выполнены, запустите задачи c и d параллельно:

  гл.серия (gulp.parallel (a, b), gulp.parallel (c, d))
  

Вышеупомянутая задача css может быть перенесена в Gulp.js 4 путем изменения массива на вызов метода series () :

  gulp.task ('css', gulp.series ('изображения', () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build));

));
  

Асинхронное завершение

Gulp.js 3 разрешал синхронные функции, но они могли приводить к ошибкам, которые было трудно отладить.Рассмотрим задачи, которые не возвращают потоковое значение gulp . Например, задача clean для удаления папки build :

  конст.
  глоток = требовать ('глоток'),
  del = требуется ('del'),
  dir = {
    src: 'src /',
    сборка: 'сборка /'
  };

gulp.task ('clean', () => {

  del ([dir.build]);

});
  

Gulp.js 4.0 выдает предупреждение, потому что ему необходимо знать, когда задача завершена, чтобы управлять последовательностями series () и parallel () :

  [15:57:27] Использование gulpfile gulpfile.js
[15:57:27] Запуск "чистого" ...
[15:57:27] Следующие задачи не выполнены: очистить
[15:57:27] Вы забыли сигнализировать о завершении асинхронной обработки?
  

Чтобы решить эту проблему, Gulp.js 4 примет возвращенное обещание (которое поддерживается пакетом del ) :

  gulp.task ('clean', () => {

  return del ([dir.build]);

});



  

В качестве альтернативы передайте функцию обратного вызова, которая выполняется по завершении ( del также предоставляет синхронный метод sync () ) :

  гл.task ('clean', (done) => {

  del.sync ([dir.build]);
  Выполнено();

});
  

Вот более сложный пример Gulp.js 3 с задачами наблюдения:

  gulp.task ('default', ['css', 'server'], () => {

  
  gulp.watch (imgConfig.src, ['изображения']);

  
  gulp.watch (cssConfig.watch, ['css']);

});
  

Их можно перенести в методы Gulp.js 4 series () и обратный вызов done () :

  gulp.task ('default', gulp.series ('css', 'server', (done) => {

  
  глоток.часы (imgConfig.src, gulp.series ('изображения'));

  
  gulp.watch (cssConfig.watch, gulp.series ('css'));

  Выполнено();

}));
  

Дополнительный совет: преобразование методов задач в модули ES6

Большинство конфигураций gulpfile.js будут работать в Gulp.js 4.0 после преобразования массивов задач в вызовы series () и завершение сигналов асинхронных функций.

Хотя метод определения task () все еще поддерживается, новый модуль ES6 экспортирует шаблон предлагает несколько преимуществ:

  1. Можно определить частные задачи, которые можно вызывать в файле gulpfile.js , но не из команды gulp .
  2. Функции могут передаваться по ссылке, а не по имени строки, поэтому редакторы могут выделять синтаксические ошибки.
  3. На одну и ту же функцию можно ссылаться, используя любое количество имен задач.
  4. Сложные зависимости проще определять в series () и / или parallel () .

Возьмите следующие Gulp.js 3 изображений и css задач:

  гл.задача ('изображения', () =>

  gulp.src (imgConfig.src)
    
    .pipe (gulp.dest (imgConfig.build))

);

gulp.task ('css', ['изображения'], () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build))

);
  

Их можно преобразовать для использования шаблона модуля Gulp.js 4:

  изображений функций () {

  вернуть gulp.src (imgConfig.src)
    
    .pipe (gulp.dest (imgConfig.build));

}
export.images = изображения;
export.pics = изображения;


function css () {

  вернуть gulp.src (cssConfig.SRC)
    
    .pipe (gulp.dest (cssConfig.build));

}
export.css = gulp.series (изображения, css);
export.styles = exports.css;
  

Примечание: return операторов должны быть добавлены, потому что стрелка ES6 => функции с неявным возвратом были изменены на стандартные определения функций.

В этом примере Gulp.js 4:

  • изображений gulp или изображений gulp могут использоваться для запуска задачи images ()
  • либо gulp css , либо стилей gulp будет запускать изображений () , за которыми следует css () .

Задайте exports.default , чтобы определить запуск задачи по умолчанию, когда gulp выполняется из командной строки без конкретной задачи.

Глоток добра

Пример задач CSS, который оптимизирует изображения, компилирует Sass, минимизирует CSS и выполняет перезагрузку в реальном времени при изменениях, преобразовал менее одного часа. Изучите код на GitHub, чтобы увидеть:

Требуется некоторое время, чтобы (правильно) прибыть, но Gulp.js 4 предоставляет возможности для определения задач, которые были бы непрактичными в версии 3.Обновление программного обеспечения может показаться пустой тратой усилий при разработке, но вы будете вознаграждены более быстрым и надежным набором задач, что в конечном итоге сэкономит время.

задач сборки - Gulp - Just Eat Библиотека и документация интерфейсных компонентов

Gulp связывает воедино интерфейсные задачи, выполняемые на веб-платформе Just Eat, такие как компиляция Sass и транспиляция Babel.

Gulp и связанные с ним плагины могут управляться через менеджеры пакетов NPM или Yarn.Мы рекомендуем использовать Yarn, поэтому все модули fozzie имеют в своем корне файл yarn.lock .

глоток-сборка-фоззи

Мы управляем всеми нашими задачами gulp в проектах с помощью общего набора настраиваемых задач с помощью модуля gulp-build-fozzie .

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

Начало работы с Gulp

Здесь мы документируем два способа локального запуска задач Gulp: с использованием Visual Studio и его встроенных инструментов или запуском Gulp через командную строку.

Использование Gulp в командной строке

Первый способ использования Gulp - напрямую через командную строку или терминал. Для этого просто:

  1. Установить Node.js

    Установка должна быть такой же простой, как переход на веб-сайт Node.js, загрузка последней версии LTS (которая должна быть четной версией) и запуск этого установщика. В течение всего процесса установки используйте все значения по умолчанию, и это должно установить Node и NPM в вашей системе.

  2. Установить Gulp

    Откройте командную строку или окно терминала и введите npm install gulp -g . Это должно установить Gulp, чтобы Visual Studio могла творить чудеса.

  3. Установить пряжу

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

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

  4. Установить зависимости проекта

    Перейдите в каталог, содержащий проекты package.json , используя командную строку или окно терминала, а затем запустите yarn . Затем Yarn установит зависимости проекта локально на вашем компьютере.

Теперь вы можете запустить gulp из каталога, содержащего проекты package.json .

По умолчанию Gulp запускает задачу по умолчанию, но вы можете запустить любую из задач проекта, добавив имя задачи к вашему вызову gulp .Например, запуск gulp css запустит задачу, которая компилирует файлы CSS.

Полный список доступных задач можно найти в документации по модулям.

Использование Gulp в Visual Studio

Здесь мы документируем шаги, необходимые для успешного запуска Gulp с помощью Visual Studio 2017.

Шаги настройки

Чтобы начать работу с использованием Gulp в вашей настройке Visual Studio, просто выполните следующие шаги:

  1. Установить узел.js

    Node.js - и связанный с ним менеджер пакетов npm - необходимы для выполнения задач Gulp с VS 2013 или VS 2015 Professional.

    Установка должна быть такой же простой, как переход на веб-сайт Node.js, загрузка последней версии LTS (которая должна быть четной версией) и запуск этого установщика. Используйте все значения по умолчанию на протяжении всего процесса установки, и это должно установить Node и NPM (его менеджер пакетов) в вашей системе.

  2. Установить Gulp

    Откройте командную строку или окно терминала и введите npm install gulp -g .Это должно установить Gulp, чтобы Visual Studio могла творить чудеса.

  3. Проверить и установить зависимости проекта

    Это должно быть выполнено автоматически с помощью Visual Studio. Чтобы проверить, так ли это, поищите папку node_modules в том же каталоге, что и `package.json вашего проекта.

    Если нет папки node_modules , перейдите в каталог, содержащий проекты package.json , используя командную строку или окно терминала, а затем запустите npm install .Затем NPM установит зависимости проекта локально на вашем компьютере. Если вы видите какие-либо предупреждения в командной строке во время этого шага, не беспокойтесь о них, они не должны влиять на сборку Gulp.

  4. Приоритет конфигурации локального узла в VS

    Хорошо, значит, вам нужно установить зависимости. Есть еще один вариант, который необходимо настроить в Visual Studio.

    В строке меню Visual Studio перейдите в Инструменты -> Параметры -> Проекты и решения -> Внешние веб-инструменты .Затем переместите ссылку $ (PATH) в отображаемом списке в верхнюю часть списка. Должно получиться вот так.

    При этом ваша собственная локально установленная версия Node имеет приоритет над версией Visual Studio (которая может устареть).

… и все!

Если вы не планируете самостоятельно редактировать какой-либо CSS, вы можете забыть, что Gulp даже существует, и он автоматически сделает свое дело, когда вы создадите проект через Visual Studio.

Пряжа

Мы используем Yarn - диспетчер пакетов узлов - для установки и управления используемыми нами пакетами Gulp.Чтобы установить Yarn, ознакомьтесь с их руководством по установке для вашей платформы,

.

Чтобы увидеть полный список используемых нами пакетов, загляните в gulp-build-fozzie package.json .

При первом использовании Gulp вам потребуется установить эти зависимости через Visual Studio или выполнив следующую команду в командной строке или терминале:

  пряжа
  

Доступные задачи

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

Также можно запустить gulp --tasks в командной строке или в терминале в том же каталоге, что и ваш package.json , чтобы вывести список всех доступных задач.

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

Начало работы с gulp и VS Code - Vjeko.com

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

Пару недель назад я начал свой доклад о gulp, объяснив, как я упростил и ускорил разработку надстроек управления. Если вы настоящий разработчик NAV, и если вы не классифицировали всю эту серию по gulp в категорию «кому небезразлично» , то, скорее всего, вы останетесь со мной сегодня и узнаете, как настроить gulp и начать использовать это в VS Code.

В этом посте я объясню, что (и почему) вам нужно сделать, чтобы запустить gulp, а затем я создам очень простую задачу gulp. Это первая публикация из серии, в которой я надеюсь создать сквозной пример, который вы даже сможете применить на практике в своих проектах.

Приступим.

Gulp - это модуль Node.js, что означает, что на вашем компьютере должен быть установлен Node.js. Несмотря на то, что VS Code использует Node.js для внутренних целей, на самом деле он использует его только для внутренних целей, и вам необходимо установить Node.js отдельно, чтобы иметь возможность запускать любой из них. Чтобы проверить, установлен ли у вас узел, запустите командную строку и выполните следующую команду:

  узел - версия
  

(В качестве альтернативы, запустите свой VS Code и нажмите View> Terminal или нажмите Ctrl + `на клавиатуре. Все примеры в этом и будущих сообщениях на gulp предполагают, что вы вводите все команды в окне терминала из VS Code, и что в нем открыто рабочее пространство AL.)

Если приведенная выше командная строка не дает результата или выдает ошибку, перейдите по адресу https: // nodejs.org / en / и сначала установите Node.js.

Теперь, когда у вас есть Node.js, следующим шагом будет установка gulp. Как и любые модули Node.js, вы можете установить gulp глобально или локально. Локальная установка выполняется для каждого проекта, рабочего пространства, папки или того, что вы хотите назвать своим локальным каталогом. Модуль, установленный локально, доступен для Node.js только тогда, когда вы находитесь внутри этой локальной папки. Модуль, установленный глобально, доступен для Node.js на всей машине, независимо от того, в какой папке, проекте или рабочем пространстве вы находитесь.

Как вы хотите установить модуль, зависит от того, как он будет использоваться. Некоторые модули предоставляют только функциональные возможности выполнения JavaScript, которые могут быть вызваны из файлов JavaScript, выполняемых Node.js - обычно они устанавливаются локально. Однако, если модуль предоставляет функциональные возможности командной строки, он должен быть установлен глобально.

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

Итак, давайте сначала установим gulp глобально:

  npm i gulp --global
  

Это было легко. Пришло время установить gulp локально. У вас может возникнуть соблазн сделать это:

  нпм глотком
  

Но не надо! Да, он установит gulp локально для вашего проекта, но этого будет достаточно, только если вы единственный человек, когда-либо использующий этот проект, и только когда-либо на этой машине.Это почему?

Давайте сначала посмотрим, что такое npm. Npm - это менеджер пакетов. Он устанавливает и управляет внешними пакетами, необходимыми для вашего решения. Если вы когда-либо занимались разработкой .NET и когда-либо использовали NuGet, то npm - то же самое. Проще говоря: npm для Node.js для NuGet для .NET. Но помимо простой установки пакетов, npm может управлять зависимостями . Если зависит от пакета , если вы объявляете зависимость от этого пакета, npm может автоматически обрабатывать эти зависимости за вас, загружать их, когда они недоступны, и поддерживать их в актуальном состоянии.

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

Итак, вооружившись новым пониманием npm, вы решили посмотреть, как сделать gulp зависимостью, но быстро узнаете, что есть два разных способа сделать это:

  npm i gulp - сохранить
  
  npm я глоток --save-dev
  

Разница здесь в том, что первый сделает gulp производственной зависимостью того, что вы создаете, а второй сделает это зависимостью от среды разработки.При создании расширений AL вы используете gulp только для разработки, поэтому второй вариант - правильный выбор. Однако, если, например, вы разрабатываете расширения VS Code, и эти расширения будут использовать gulp, пока они делают то, для чего они предназначены, тогда вам следует использовать первый вариант, чтобы указать, что ваше расширение требует запуска gulp.

Если вы хотите узнать больше о различиях, возможно, эта статья поможет вам в этом:
https: // imcodebased.com / npm-save-or-save-dev-который-один-использовать /

Хорошо. Итак, теперь вы знаете, что для разработки AL вам нужна только зависимость разработки, вам нужно запустить это:

  npm я глоток --save-dev
  

Когда это будет сделано, вы можете проверить, работает ли gulp у вас. Если все, что вы сделали, было правильно (а почему этого не должно быть, дело не в том, что вы строили космический корабль), вы сможете запустить это:

  глоток
  

Это даст следующий результат:

  [09:25:06] Файл gulpfile не найден
              

Это похоже на ошибку, и это так.Это полный отчет по долгу службы, который сообщает, что не нашел никаких инструкций. Теперь вам нужно сказать gulp, что и как делать. Это сообщение об ошибке сообщает, что файл gulpfile отсутствует, поэтому давайте сначала займемся этой частью. В корне вашей рабочей области просто создайте новый файл и назовите его gulpfile.js. Пока ничего не добавляйте, просто оставьте поле пустым. Имея файл там, снова запустите gulp и посмотрите на результат:

  [09:29:31] Использование gulpfile C: \ Temp \ Gulp \ gulpfile.js
[09:29:31] Задача никогда не определялась: по умолчанию
[09:29:31] Чтобы вывести список доступных задач, попробуйте запустить: gulp --tasks
  

Это означает, что теперь gulp может читать ваш файл задачи и запускать задачи.Однако, поскольку ваш файл gulp пуст, gulp не нашел задач для запуска.

Давайте создадим первую простую задачу.

Задачи Gulp написаны на JavaScript, и каждая задача определяется в функции JavaScript. Это не означает, что любая функция, которую вы объявляете в gulpfile.js, автоматически станет задачей, это просто означает, что для определения задач вы должны определять их внутри функций.

Например, попробуйте поместить это в свой gulpfile.js:

(Имейте в виду, что эта функция еще не является реальной задачей gulp, но она послужит хорошей отправной точкой.)

Если вы сейчас попробуете снова запустить gulp, вы увидите, что результаты не изменились. Чтобы ваша функция стала задачей, вы должны явно сделать ее задачей или придерживаться правильной терминологии: вы должны экспортировать это . Я расскажу об экспорте задач из gulpfile.js в моем следующем посте, потому что я хочу, чтобы этот пост был как можно более простым. В экспорте задач гораздо больше, чем кажется на первый взгляд, поверьте мне на слово.

Gulp - это модуль Node.js, а это значит, что для его использования вам необходимо сначала загрузить его в свой скрипт.В Node.js мы называем этот процесс , для которого требуется модуль. Чтобы потребовать модуль, вы просто вызываете встроенную функцию require. Обычно вам требуется модуль в начале вашего скрипта, поэтому вы можете вставить следующую строку вверху вашего скрипта:

Затем вы можете сделать свою функцию helloWorld задачей, просто передав ее в метод задачи. Обычно это делается в конце файла gulp. Теперь ваш gulpfile.js будет выглядеть так:

Запуск gulp по-прежнему не дает никакого эффекта, но если вы запустите gulp –tasks, вы увидите, что теперь gulp распознает вашу функцию helloWorld как задачу, которую она может вызвать:

Одна замечательная вещь с gulp заключается в том, что VS Code изначально понимает их.Любая задача, которую вы настраиваете в gulpfile.js, автоматически становится доступной для VS Code. Чтобы проверить это смелое заявление, нажмите Ctrl + Shift + P, затем выполните команду «Задачи: Выполнить задачу». Он должен показать это:

Но здесь есть одна оговорка. В отличие от файла VS Code tasks.js, который перезагружается при каждом изменении VS Code, файл gulpfile.js обрабатывается только один раз за сеанс VS Code. VS Code обработает ваш файл gulpfile.js при первом вызове команды «Задачи: Выполнить задачу», и никакие изменения, внесенные вами после этого, не будут видны в списке задач.Если вы каким-либо образом измените свои задачи gulp, добавив, удалив или переименовав задачи, ваш список задач VS Code не будет отражать это, пока вы не перезапустите VS Code.

Теперь, когда задача очевидна и VS Code знает о ней, мы можем попробовать запустить ее.

Чтобы запустить задачу gulp, вы можете вызвать ее из терминала, указав ее имя сразу после команды gulp. Как это:

  глоток helloWorld
  

Это запустит задачу и покажет следующий результат:

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

Самый простой способ сигнализировать о завершении с помощью обратного вызова error-first.Каждая функция gulp получает один аргумент, и этот аргумент относится к типу function. Это ваш аргумент обратного вызова, который вы должны вызывать по завершении задачи. Если ваша задача выполнена успешно, вы просто вызываете обратный вызов без каких-либо аргументов:

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

И это пока что. На данный момент у вас есть инфраструктура gulp, у вас есть первая задача gulp, которую вы можете вызывать как из терминала (командной строки), так и из палитры команд.

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

Нравится:

Нравится Загрузка ...

Связанные

Учебное пособие по

Gulp: автоматическое выполнение задач в JavaScript

Могу ли я просто получить учебное пособие, которое точно расскажет мне, что мне нужно делать и знать, чтобы настроить Gulp, не погружаясь в какое-то несвязанное обсуждение семантики HTML , интересно? Да, ты можешь.Вот.

Подходит ли вам эта статья?

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

Это руководство также было создано на Mac. Несколько шагов будут отличаться для Windows.

Предпосылки
Голы
  • Установите все необходимое для запуска Gulp.
  • Скомпилируйте несколько файлов Sass в один файл CSS, примените префиксы поставщиков и минимизируйте.

Краткий обзор

Gulp.js - система потоковой сборки - это средство выполнения задач JavaScript, которое может автоматически позаботиться о повторяющихся задачах. Как и многие другие полезные технические инструменты, в Gulp нет руководства для начинающих. Их руководство по началу работы на самом деле начинается с шага 6 или около того. Если вы уже знаете, как работают Node и npm, и у вас все установлено, это здорово, но новичок только остается смущенным и разочарованным.

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

  • Node.js - среда, которая позволяет запускать серверный JavaScript для Интернета.
  • npm - менеджер пакетов для Node.js. Инструмент, который позволяет быстро и легко настраивать локальные среды и плагины Node.
  • Локальный или глобальный - Node.js устанавливается глобально, но Gulp и все его плагины будут установлены локально для каждого проекта.
  • Средство выполнения задач - Средство выполнения задач, такое как Gulp, автоматизирует все ваши процессы, поэтому вам не нужно о них думать. Gulp требует package.json и gulpfile.js .

Список шагов

Со своей стороны, я попытаюсь создать утерянное руководство по Gulp для новичков. Я перечисляю шаги, чтобы вы знали, во что ввязываетесь.

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

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

Примечание. В 2016 году установка XCode и инструментов командной строки больше не требуется - Homebrew установит для вас необходимый интерфейс командной строки.

Это предварительное условие для установки 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, диспетчером пакетов узлов. Введите это в Терминал.

Установить Gulp глобально

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

  установка npm --global gulp-cli  

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

Установить Node и Gulp локально

С этого момента вам нужно будет перейти к папке, в которой вы храните свои веб-проекты.Для меня это / Users / tania / sites . Поскольку я начинаю с Терминала по адресу / Users / tania , я перехожу на сайтов .

Затем я создам новый каталог проекта.

И переходим во вновь созданную папку.

Чтобы установить Node локально, вам понадобится файл package.json . Вы можете создать этот файл вручную или сгенерировать его. Мы собираемся создать его, чтобы вы поняли, как он работает.

Эта команда проведет вас через создание универсального пакета .json . Это довольно просто, просто нажмите Enter, если вы не уверены или не хотите что-то заполнять. Я просто дал ему описание, ключевые слова и автора, и файл был сгенерирован.

  {
      "name": "startgulp",
      "версия": "1.0.0",
      "description": "Начало работы с Gulp",
      "main": "index.js",
      "scripts": {
        "test": "echo \" Ошибка: тест не указан \ "&& exit 1"
      },
      "ключевые слова": [
        "глоток",
        "дерзость"
      ],
      "author": "Таня Расция",
      «лицензия»: «Массачусетский технологический институт»
    }  

Теперь запустим команду для установки 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 очень много. Ради этой статьи мы собираемся установить четыре для нашего рабочего процесса веб-разработки переднего плана.

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

Если у вас нет опыта работы с Sass, я рекомендую прочитать Learn Sass Now: A Guide to Install, Using and Understanding Sass, чтобы лучше понять, как это работает.

Вот код для добавления всех четырех плагинов Gulp.

  npm install --save-dev gulp-sass gulp-cssnano gulp-sourcemaps gulp-autoprefixer  

Если вы проверите свой package. 3.1.6.0 " }

Это все установленные вами пакеты Node.

Для справки в будущем вы можете упростить процесс, изначально вставив devDependencies в свой package.json . После этого просто введите команду npm install , чтобы установить все плагины без необходимости указывать это в командной строке.

Настройка проекта

Последнее, что нам нужно сделать, это создать файл с именем gulpfile.js , который представляет собой файл JavaScript, который будет определять весь процесс выполнения задачи.

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

Edit 4/3/2017 — теперь вы увидите гораздо больше каталогов в папке node_modules из-за того, что npm изменил способ обработки зависимостей, поэтому не волнуйтесь, все по-прежнему работает так же.

Мы можем начать наш Gulpfile с определения переменной для каждого требования плагина.

  "строгое использование"

var gulp = require ('глоток')
var sass = require ('глоток-sass')
var cssnano = require ('глоток-cssnano')
var sourcemaps = require ('gulp-sourcemaps')
var autoprefixer = require ('gulp-autoprefixer')  

Мне нравится работать со всеми моими исходными файлами, такими как Sass, в каталоге src / и со всеми моими конечными файлами в каталоге dist / .

Итак, я начну с создания задачи Gulp.

  gulp.task ('рабочий процесс', function () {
  глоток
    .src ('./ src / sass / ** / *. scss')
    
    .pipe (gulp.dest ('./ dist / css /'))
})  

Путь /**/*.scss означает, что задача применяется к этому или любому последующему каталогу ( src / sass / ) с любым именем файла, заканчивающимся на .scss . Пункт назначения — dist / css / .

Вставить все остальные плагины очень просто.

  gulp.task ('рабочий процесс', function () {
  глоток
    .src ('./ src / sass / ** / *. scss')
    .pipe (sourcemaps.init ())
    .pipe (sass (). on ('ошибка', sass.logError))
    .трубка(
      autoprefixer ({
        браузеры: ['последние 2 версии'],
        каскад: ложь,
      }),
    )
    .pipe (cssnano ())
    .pipe (исходные карты.write ('./'))

    .pipe (gulp.dest ('./ dist / css /'))
})  

У каждого плагина будет соответствующий файл readme на GitHub, в котором объясняется, как его использовать. Однако большинство из них довольно просты. Каждая задача Gulp находится в конвейерной функции. Выше вы можете видеть, что я запускаю исходные карты, запускаю Sass с ведением журнала ошибок, автоприставкой для двух последних браузеров, минимизирую и записываю исходные карты в тот же каталог, что и выходной CSS.

Наконец, я собираюсь определить задачу Gulp по умолчанию как задачу «наблюдения» — Gulp будет следить за любыми изменениями в моем указанном каталоге и будет запускаться, если были внесены какие-либо изменения.

  gulp.task ('default', function () {
  gulp.watch ('./ src / sass / ** / *. scss', ['рабочий процесс'])
})  

Вот последний gulpfile.js :

  "строгое использование"

var gulp = require ('глоток')
var sass = require ('глоток-sass')
var cssnano = require ('глоток-cssnano')
var sourcemaps = require ('gulp-sourcemaps')
var autoprefixer = require ('gulp-autoprefixer')

глоток.task ('рабочий процесс', function () {
  глоток
    .src ('./ src / sass / ** / *. scss')
    .pipe (sourcemaps.init ())
    .pipe (sass (). on ('ошибка', sass.logError))
    .трубка(
      autoprefixer ({
        браузеры: ['последние 2 версии'],
        каскад: ложь,
      }),
    )
    .pipe (cssnano ())
    .pipe (исходные карты.write ('./'))

    .pipe (gulp.dest ('./ dist / css /'))
})

gulp.task ('по умолчанию', function () {
  gulp.watch ('./ src / sass / ** / *. scss', ['рабочий процесс'])
})  

Теперь, чтобы протестировать этот код, я собираюсь создать три простых .scss файлы — main.scss , _variables.scss и _scaffolding.scss .

Основной

 

    
    @import "переменные";

    
    @import "строительные леса";  

Переменные

 

$ font-style: нормальный;
$ font-option: normal;
$ font-weight: нормальный;
$ font-color: # 222;
$ font-size: 1rem;
$ line-height: 1,5;
$ font-family: Helvetica Neue, Helvetica, Arial, без засечек;  

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

 
html {
  шрифт: $ font-style $ font-variant $ font-weight # {$ font-size} / # {$ line-height} $ font-family;
}


.vertical-center {
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}  

Хорошо, этого должно быть достаточно, чтобы настроить и доказать, что автопрефиксатор и 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.Код здесь с открытым исходным кодом, хотя я еще не завершил документацию.

Теперь, когда все ваши глобальные зависимости установлены и вы знаете, как все настроить, для запуска и запуска потребуется всего три команды. Это хороший пример того, как все первоначальные настройки для Gulp в конечном итоге того стоят:

  git clone https://github.com/taniarascia/primitive.git  

(Очевидно, вам необходимо иметь базовые знания об использовании Git, чтобы использовать этот метод.)

Я рекомендую вам поиграть с созданием своей собственной структуры / шаблона, чтобы узнать, как работают основы, или интеграции с установленной структурой, такой как Foundation.

Если вам нужно более подробное объяснение того, как работает поток Gulp, прочитайте больше в документации Gulp API.

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