Gulp install: Quick Start | gulp.js

 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (install ()); 
 

В вашем

 
 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