Как запустить gulp: Vanilla 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]

Как запустить Node.js на обычном хостинге

Вам нравится Node.js? Хотите использовать Gulp 4 / Grunt / Webpack на обычном хостинге? Но как сделать это? Ведь на стандартных хостингах нет возможности самостоятельной установки программ. Т.е. Вы не можете запустить установку ни одной программы, даже из официальных репозиториев Linux. Есть выход — nvm (Node Version Manager). С помощью данной утилиты Вы сможете установить и запустить Node.js, npm и любой сборщик, типа Gulp или Grunt на любом стандартном хостинге (даже тех, которые утверждают, что для запуска Node.js требуется покупка тарифа с выделенным сервером). Для установки nvm не требуются права администратора, нужна лишь стандартная оболочка bash и программа wget, а всё это входит в любой дистрибутив Linux, на любом хостинге.

Итак, поехали!

Как установить Node.js, npm на обычном хостинге без прав администратора

Первым делом подключаемся через ssh к серверу. Для этого достаточно команды:


ssh логин@хост

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

Далее нужно понять, есть ли в домашней директории Вашего аккаунта права на создание файлов и папок. Это можно понять, попробовав создать любую папку в домашней директории аккаунта. Обращаю Ваше внимание, что домашняя директории аккаунта — это НЕ домашняя директория сайта. Домашняя директория аккаунта всегда располагается на один уровень выше и в ней нет никаких файлов и папок, относящихся к Вашему сайту. Так вот. Попробуйте создать там любой файл или папку. Для создания файла / папки Вы можете использовать в консоли команду:


cd ~ && touch test.txt && mkdir test

Если не будет никаких сообщений об ошибках, то всё ОК. Удалите тестовый каталог и файл командой:


rm -r test.txt test

Но если у Вас будет ошибка, значит создание файлов и папок в домашней директории аккаунта запрещено. Тогда ищем ту папку, в которой у нас есть возможность создавать файлы и папки. Обычно это папка с названием типа private и тому подобным. В данной папке хостинг провайдер разрешает хранить Вам бекапы, логи и любую другую информацию. Сделаем эту директорию домашней, чтобы корректно выполнялись все команды nvm и Node.js. Первым делом давайте запишем себе текущий путь данной директории (это пригодится нам в дальнейшем). Для этого, находясь в директории, где у Вас есть права на создание файлов и папок, выполним команду:


pwd

и запишем себе куда-нибудь тот путь, который нам показала консоль.

Затем в домашней директории аккаунта ищем файл .bashrc. Этот файл отвечает за выполнении пользовательских команд во время работы командной оболочки. Чтобы увидеть список файлов, которые есть, выполните команду:


cd ~ && ls -la

Если данного файла там нет, создаём его и сразу запускаем его редактирование связкой команд:


touch .bashrc && nano .bashrc

Запускается текстовый редактор nano и мы можем вносить туда данные. А именно, нам нужно переопределить системную переменную HOME. На работу Вашего сайта это никак не повлияет, это лишь задаст системную домашнюю директории Вашего аккаунта. Нам необходимо вписать следующее:


HOME=полный_путь_на_новую_домашнюю_директорию (мы записывали этот путь себе ранее)

Сохраняем файл. Для этого сначала нажимаем Ctrl+X, затем Y, затем Enter.

Затем ищем файл .bash_profile (он обязательно будет в домашней директории) и открываем его на редактирование командой:


nano .bash_profile

Вписываем туда строки:


if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

Сохраняем.

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

После подключения выполняем:


cd ~ && pwd

Если мы всё сделали правильно — мы должны увидеть путь на нашу директорию, в которой мы имеем право создавать файлы и папки.

Теперь нам осталось скачать и запустить nvm (Node Version Manager):


wget -qO- https://cdn.rawgit.com/creationix/nvm/master/install.sh | bash

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

Затем открываем на редактирование файл .bashrc (как это сделать я писал ранее), и вписываем туда две строки:


export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Сохраняем файл.

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

Затем устанавливаем Node.js и пакетный менеджер npm:


cd ~ && nvm install stable

После выполнения данной команды у нас установится последняя версия Node.js и npm.

После завершения установки проверим это. Выполним команду:


node -v

В консоли появится номер актуальной версии Node.js

Теперь мы можем использовать Gulp 4 / Grunt / Webpack и все другие возможности Node. В том числе, мы можем настроить автоматическую сборку пакетов, автоматическую минификацию и сборку стилей, сжатие изображений при их загрузке и многое другое…

Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
Web development blog!

Gulp не следит за импортированными модулями sass

I’m trying to set up gulp and watch for files change and then reload browserSync. Modifying main.sass file is working fine, but when imported in main.sass files are modified, gulp doesnt see it. Same happens to pug, modifying includes is hidden for gulp-watch.

What I’ve tried:

  1. includePaths in some ways

  2. tried to write in gulp.src() path like ‘desktop/css/**/*.sass’, but it caused that imported modules were compiled in a separate file, which is wrong behavior (not as I expected, sadly).

My imported files are in desktop/css/modules/*. sass, entry sass file (main.sass) is in desktop/css/main.sass

My gulpfile

import gulp from 'gulp'
import sass from 'gulp-sass'
import autoprefixer from 'gulp-autoprefixer'
import cleanCSS from 'gulp-clean-css'
import pug from 'gulp-pug'
import pump from 'pump'
import browserSync from 'browser-sync'

const browserSyncServer = browserSync.create()

gulp.task('desktop-styles', () => {
    gulp.src('desktop/css/*.sass')
     .pipe(sass({ includePaths: ['desktop/css/modules'] }))
     .pipe(autoprefixer())
     .pipe(cleanCSS())
     .pipe(gulp.dest('desktop/build/css'))
     .pipe(browserSyncServer.stream())
})

gulp.task('desktop-html', () => {
    gulp.src('desktop/templates/*.pug')
     .pipe(pug())
     .pipe(gulp.dest('desktop/build'))
     .pipe(browserSyncServer.stream())
})

gulp.task('desktop', ['desktop-html', 'desktop-styles'], () => {
    browserSyncServer.init({
     server: "./desktop/build"
    })
    gulp.watch('desktop/templates/*. pug', ['desktop-html']).on('change', (e) => {
     console.log(' HTML File ${e.path} has been ${e.type}')
    })
    gulp.watch('desktop/css/*.sass', ['desktop-styles']).on('change', (e) => {
     console.log(' CSS File ${e.path} has been ${e.type}')
    })
})

Я пытаюсь настроить gulp и наблюдать за изменениями файлов, а затем перезагрузить browserSync. Изменение файла main.sass работает нормально, но при импорте в файлы main.sass, gulp не видит его. То же самое происходит с мопсом, модификация включений скрыта для gulp-watch.

Что я пробовал:

  1. INCLUDEPATHs в некотором роде

  2. пытались написать в gulp.src() путь, как ‘настольного/CSS/**/* дерзость’, но это привело к тому, что импортированные модули были скомпилированы в отдельный файл, что является неправильным поведением (не так, как я ожидал, к сожалению).

Моих импортированные файлы в desktop/css/modules/*.sass, запись дерзость файл (main.sass) находится в desktop/css/main. sass

Моего gulpfile

import gulp from 'gulp' 
import sass from 'gulp-sass' 
import autoprefixer from 'gulp-autoprefixer' 
import cleanCSS from 'gulp-clean-css' 
import pug from 'gulp-pug' 
import pump from 'pump' 
import browserSync from 'browser-sync' 

const browserSyncServer = browserSync.create() 

gulp.task('desktop-styles',() => { 
    gulp.src('desktop/css/*.sass') 
    .pipe(sass({ includePaths: ['desktop/css/modules'] })) 
    .pipe(autoprefixer()) 
    .pipe(cleanCSS()) 
    .pipe(gulp.dest('desktop/build/css')) 
    .pipe(browserSyncServer.stream()) 
}) 

gulp.task('desktop-html',() => { 
    gulp.src('desktop/templates/*.pug') 
    .pipe(pug()) 
    .pipe(gulp.dest('desktop/build')) 
    .pipe(browserSyncServer.stream()) 
}) 

gulp.task('desktop', ['desktop-html', 'desktop-styles'],() => { 
    browserSyncServer.init({ 
    server: "./desktop/build" 
    }) 
    gulp.watch('desktop/templates/*.pug', ['desktop-html']).on('change', (e) => { 
    console. log(' HTML File ${e.path} has been ${e.type}') 
    }) 
    gulp.watch('desktop/css/*.sass', ['desktop-styles']).on('change', (e) => { 
    console.log(' CSS File ${e.path} has been ${e.type}') 
    }) 
})

css sass gulp gulp-watch gulp-sass40

Запуск gulp на хостинге beget

17 июня 2017, 17:12

|

Кундиус Руслан

|

Системное администрирование

|

Иногда может потребоваться запустить сборку фронта непосредственно на хостинге, это может быть сайт, где по разным причинам не рационально использовать подход Build & Deploy.

Поскольку мы работаем в основном с хостингом beget.com, речь пойдет о настройке в рамках именно этого хостинга. Но данная инструкция применима и для других площадок.

1. Включение SSH

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

В технической информации панели управления хостингом есть соответствующий переключатель:

2. Подключение по SSH

Теперь можно зайти на сервер по ssh. Для этого в unix подобных системах можно воспользоваться обычным терминалом, а в window специальной программой, например PuTTY.

Адрес сервера можно посмотреть в разделе технической информации из первого пункта. Логин и пароль соответствуют логину и паролю непосредственно к аккаунту хостинга.

Подключиться в терминале такой командой:

$ ssh [email protected]

Где login — логин аккаунта, host.beget.tech — адрес сервера. При подключении будет запрошен пароль от аккаунта хостинга.

3. Установка NodeJS

Установим необходимое ПО. Постольку поскольку это виртуальный хостинг, ставить будем локально.

Сперва необходимо узнать ссылку на архив с последней версией NodeJS, для этого заходим на официальный сайт и ищем там похожий файл «node-v*-linux-x64.tar.gz».

На момент написания статьи актуальная версия 8.1.2 и все команды в примерах содержат название файла этой версии, вам нужно скорректировать команды в соответствии с последней версией NodeJS.

Копируем ссылку на файл и скачиваем его:

$ wget https://nodejs.org/dist/latest/node-v8.1.2-linux-x64.tar.gz

Распаковываем архив:

$ tar xvzf node-v8.1.2-linux-x64.tar.gz

Архив нам больше не понадобится, удаляем:

$ rm node-v8.1.2-linux-x64.tar.gz

Добавляем папку с бинарниками ноды в PATH, для этого в корне аккаунта создаем файл .bashrc и пишем в него строку:

$ export PATH=~/node-v8.1.2-linux-x64/bin:$PATH

Теперь, чтобы изменения вступили в силу, нужно перезайти по ssh.

Проверить все ли работает можно выполнив node -v и npm -v, если они показывают версии программ- все работает.

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

Когда NodeJS установлен, можно перейти к установке самого сборщика. Для этого заходим в папку с сайтом, например:

$ cd ~/НАЗВАНИЕ_САЙТА/public_html

И устанавливаем сборщик:

$ npm install gulp-cli -g
$ npm install gulp -D
$ touch gulpfile. js
$ gulp

Последняя команда выведет что-то вроде «Task ‘default’ is not in your gulpfile«- это значит, что сборщик готов к использованию и вы можете приступить к его настройке.

Непосредственно настройку сборщика мы рассмотрим в следующей статье.

 

Понравилась статья? Поделись с друзьями:

1. Начало работы со сборкой

Быстрое резюме:

git clone <you-repository-url>

npm i

Profit!

 

Инструкция когда вы впервые начинаете работать. Шаги и команды которые надо делать. А также пояснение что это значит. Я уже писал инструкцию, обязательно прочитайте ее. Чтобы информация зашла — ее надо прочитать несколько раз, с разных сторон. Это второй вариант ее первой части. Более структурированный и улучшенный.

Пояснение. В командной работе у команды есть один репозиторий на github, его размещает тим-лидер. Всех участников своей команды он добавляет в collaborators к этому репозиторию. Вам не надо делать fork (копию этой сборки к себе на GitHub). Вы делаете только локальную копию, к себе на компьютер — через команду git clone.

Примечание. Clone и Fork — это разные команды и разные значения.
Fork — это отдельная копия проекта в вашем github аккаунте на сайте.
Clone — это копия удаленного репозитория которая находится у вас на компьютере. Это локальная копия удаленного репозитория. Эти понятия важно понимать и различать.

Важное пояснение. В этой статье я буду все показывать на примере сборки 3-ей группы. Делайте на это поправку. У вас адрес проекта на GitHub может быть будет другой!

Шаг 1. Клонируем проект себе на компьютер

Зайти на страницу проекта вашей команды:
https://github.com/nobleworkshop/wc-team03

На компьютере, переходим в папку C:/PROJECTS/
Открываем в ней консоль и вводим команду:
git clone https://github. com/nobleworkshop/wc-team03
Этой командой мы клонируем удаленный репозиторий к себе в на компьютер. Тем самым — создаем его локальную копию.

После данной команды в папке C:/PROJECTS/ будет создана папка wc-team03. Как видите имя папки было взято из имени репозитория на GitHub.

Теперь у нас есть локальная копия удаленного репозитория. И находится она в папке:
C:/PROJECTS/wc-team03

Шаг 2. Запускаем сборку.

Заходим в папку проекта на своем компьютере. У меня это ‘C:/PROJECTS/wc-team03’
Открываем в ней консоль. Пишем команду:
npm i
Нажимаем Enter и ждем. Некоторое время будет идти установка пакетов. Так npm установит все необходимые пакеты для работы нашей сборки.

Тестируем сборку. Когда все установлено запускаем команду gulp

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

Должно произойти следующее:
1. Откроется окно браузера с главной страницей нашей сборки.
2. Проверяем работу плагина watch: С запущенной сборкой, отредактируется файл main.less Поменяйте цвет текста на странице. Браузер должен сам обновить страницу, показав изменения.
3. Проверяем работу плагина watch при создании новых страниц: С запущенной сборкой, создайте копию страницы index.pug, назовите ее blog.pug. В папке app должна появится страница blog.html. Таким образом мы проверяем что плагин gulp-watch видит новые файлы внутри сборки, даже если они созданы после запуска gulp. Это очень важно. Если это не работает, то вам придется перезапускать сборку при каждом создании нового файла, что очень неудобно.

Если сборка не заработала, или запустилась и watch не работает —  смотрите решение ниже в конце статьи.

Шаг 3. Итог

Ура! Вы склонировали проект к себе на компьютер. Запустили и протестировали его работу. Он — работает! Можно приступать к следующей инструкции — разработка новых страниц в проекте.

 

Если сборка не работает:

Внимание!!! То что написано ниже, стоит делать только если вы протестировали работу сборки у вас не работает gulp-watch, то есть слежение за текущими и новыми файлами.

Например сборка запускается, но не реагирует на изменение less файла, или на создание нового pug файла. Или вообще не запускается. Если не запускается убедитесь что вводите команду gulp в консоли — находясь в корневой папке сборки.

Не работать сборка может может в основном из-за 2-х причин.

1-я причина

В пути к проекту есть пробелы или кириллические символы. Нельзя размещать проект на рабочем столе! Я строго настаиваю чтобы вы размещали проект в папке c:/PROJECTS/

2-я причина

Возможен конфликт глобально установленного пакета gulp и пакета  gulp который установлен внутри сборки. Бывает что у них разные версии. А именно глобально 4-я, локально 3-я. Или наоборот, глобально 4-я, а локально 4-я. Для этого необходимо поступить следующим образом. Удалить глобальный gulp, не важно какой он у вас версии. И вместо него установить глобально пакет gulp-cli . gulp-cli это пакет чтобы работать с gulp из командной строки.

Ваш порядок действий и команд:

  1. Вводим команду чтобы посмотреть какие пакеты у вас установлены в системе глобально:
    npm list -g --depth=0Команда покажет что то вроде:
    +— [email protected]
    +— [email protected]Здесь мы видим что у нас глобально установлен bower и gulp 4-й версии.
    Либо у вас может быть gulp 3-й версии: +— [email protected]Если у вас есть глобально установленный gulp переходим к следующему шагу.
  2. Вводим команду для удаления глобального gulp
    npm rm -g gulp
    Эта команда должна удалить глобальный gulp пакет, неважно какой он был версии.Только в экстренных ситуациях. Если после этой команды удаление не произошло, и консоль ругается и пишет что то вроде «Cannot delete gulp …» Тогда идем в папку «C:\Users\user-name\AppData\Roaming\npm\node_modules» и вручную удаляем оттуда папку с gulp. Вообще в этом случае я рекомендую удалить всю папку «C:\Users\user-name\AppData\Roaming\npm», через Удаление Программ — удалить nodejs. Затем заново скачать и установить его заново. После переустановки node js — перезагрузить компьютер.
  3. Теперь проверим что глобальный gulp был удален.
    Вводим команду:
    npm list -g --depth=0
    В консоли не должно быть его упоминания.
  4. Теперь глобально установим пакет gulp-cli, введем команду:
    npm i -g gulp-cli
  5. Протестируйте сборку еще раз. Она должна работать!)

node.js — Как запустить gulp в Windows 7?

Я пытаюсь запустить gulp в Windows 7. Я считаю, что у меня есть все зависимости, но когда я набираю gulp по умолчанию cmd или posh-git, я получаю следующую ошибку:

  gulp: термин «gulp» не распознается как имя командлета, функции, файла сценария или работающей программы. Проверьте написание имени или, если был включен путь,
убедитесь, что путь правильный, и попробуйте еще раз. 
В строке: 1 символ: 1
+ глоток
+ ~~~~
+ CategoryInfo: ObjectNotFound: (gulp: String) [], CommandNotFoundException
+ FullyQualifiedErrorId: CommandNotFoundException

Что мне сделать, чтобы он заработал?

Вот сообщения консоли, которые я получаю при попытке установить gulp

.

  npm install gulp - g
npm http GET https: // registry.npmjs.org/gulp
    npm http 200 https: //registry.npmjs.org/gulp
    npm WARN engine gulp @ 3.4.0: хотел: {
        "узел": "> = 0,9"
    }(Текущий: {
        "узел": "v0.8.22",
        «npm»: «1.2.14»
    })
npm http GET https: //registry.npmjs.org/orchestrator
    npm http GET https: //registry.npmjs.org/resolve
    npm http GET https: //registry.npmjs.org/findup-sync
    npm http GET https: //registry.npmjs.org/pretty-hrtime
    npm http GET https: //registry.npmjs.org/archy/0.0.2
    npm http GET https: // registry.npmjs.org/optimist
    npm http GET https: //registry.npmjs.org/semver
    npm http GET https: //registry. npmjs.org/vinyl-fs/0.0.1
    npm http GET https: //registry.npmjs.org/gulp-util
    npm http 304 https: //registry.npmjs.org/orchestrator
    npm http 304 https: //registry.npmjs.org/resolve
    npm http 304 https: //registry.npmjs.org/archy/0.0.2
    npm http 304 https: //registry.npmjs.org/pretty-hrtime
    npm http 304 https: //registry.npmjs.org/findup-sync
    npm http 304 https: // реестр.npmjs.org/optimist
    npm http 304 https: //registry.npmjs.org/semver
    npm http 304 https: //registry.npmjs.org/vinyl-fs/0.0.1
    npm http 304 https: //registry.npmjs.org/gulp-util
    винил двигателя npm WARN - fs @ 0.0.1: wish: {
        "узел": "> = 0,9"
    }(Текущий: {
        "узел": "v0.8.22",
        «npm»: «1.2.14»
    })
npm WARN engine gulp - util @ 2.2.20: хотела: {
    "узел": "> = 0,9"
}(Текущий: {
    "узел": "v0.8.22",
    «npm»: «1.2.14»
})
npm http GET https: //registry.npmjs.организация / поток-потребление
    npm http GET https: //registry.npmjs.org/end-of-stream
    npm http GET https: //registry. npmjs.org/sequencify
    npm http GET https: //registry.npmjs.org/glob
    npm http GET https: //registry.npmjs.org/lodash
    npm http 304 https: //registry.npmjs.org/stream-consume
    npm http 304 https: //registry.npmjs.org/end-of-stream
    npm http 304 https: //registry.npmjs.org/sequencify
    npm http 304 https: //registry.npmjs.org/glob
    npm http 304 https: //registry.npmjs.org / lodash
    npm http GET https: //registry.npmjs.org/glob-watcher
    npm http GET https: //registry.npmjs.org/mkdirp
    npm http GET https: //registry.npmjs.org/graceful-fs
    npm http GET https: //registry.npmjs.org/map-stream
    npm http GET https: //registry.npmjs.org/vinyl
    npm http GET https: //registry.npmjs.org/glob-stream
    npm http GET https: //registry.npmjs.org/chalk
    npm http GET https: //registry.npmjs.org/dateformat
    npm http GET https: //registry.npmjs.org/lodash._reinterpolate
    npm http GET https: //registry.npmjs.org/lodash.template
    npm http GET https: //registry. npmjs.org/minimist
    npm http GET https: //registry.npmjs.org/multipipe
    npm http GET https: //registry.npmjs.org/through3
    npm http GET https: //registry.npmjs.org/vinyl
    npm http 304 https: //registry.npmjs.org/graceful-fs
    npm http 304 https: //registry.npmjs.org/glob-watcher
    npm http 304 https: //registry.npmjs.org/mkdirp
    npm http 304 https: //registry.npmjs.org/map-stream
    npm http 304 https: // реестр.npmjs.org/dateformat
    npm http 304 https: //registry.npmjs.org/chalk
    npm http 304 https: //registry.npmjs.org/glob-stream
    npm http 304 https: //registry.npmjs.org/vinyl
    npm http 304 https: //registry.npmjs.org/lodash._reinterpolate
    npm http 304 https: //registry.npmjs.org/lodash.template
    npm http 304 https: //registry.npmjs.org/minimist
    npm http 304 https: //registry.npmjs.org/multipipe
    npm http 304 https: //registry.npmjs.org/through3
    npm http 304 https: // реестр.npmjs.org/vinyl
    npm WARN engine glob - watcher @ 0.0.8: хотел: {
        "узел": "> = 0,9"
    }(Текущий: {
        "узел": "v0. 8.22",
        «npm»: «1.2.14»
    })
npm WARN engine glob - stream @ 3.1.18: wish: {
    "узел": "> = 0,9"
}(Текущий: {
    "узел": "v0.8.22",
    «npm»: «1.2.14»
})
npm WARN engine vinyl @ 0.2.3: хотела: {
    "узел": "> = 0,9"
}(Текущий: {
    "узел": "v0.8.22",
    «npm»: «1.2.14»
})
npm http GET https: //registry.npmjs.org/once
    npm ERR! ошибка отката Ошибка: ENOTEMPTY, rmdir 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ optimist \ test'
npm ERR! ошибка отката gulp @ 3.0,5,0 '
npm ERR! Допустимые цели установки:
    npm ERR! ["0.1.0", "0.1.1", "0.2.0", "0.2.1", "0.3.0", "0.4.0", "0.5.0", "0.5.1 "," 1.0.0 "]
npm ERR! при installTargetsError (C: \ Program Files \ nodejs \ node_modules \ npm \ lib \ cache.js: 682: 10)
npm ERR! в C: \ Program Files \ nodejs \ node_modules \ npm \ lib \ cache.js: 597: 10
npm ERR! при сохранении (C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ npm - реестр - client \ lib \ get.js: 138: 7)
npm ERR! в Object. oncomplete (fs.js: 297: 15)
npm ERR! Если вам нужна помощь, вы можете сообщить об этом журнале по адресу:
    npm ERR! 
    npm ERR! или отправьте его по электронной почте:
    npm ERR! 

    npm ERR! Система Windows_NT 6.1.7601
npm ERR! команда "C: \\ Program Files \\ nodejs \\\\ node.exe"
"C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ bin \\ npm-cli.js"
"установить"
"глоток"
"-грамм"
npm ERR! cwd E: \ DropBoxes \ DropBox \ Experts \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome
узел npm ERR! - v v0.8.22
npm ERR! npm - версия 1.2.14
npm ERR! Ошибка: ENOENT, chmod 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ findup-sync \ node_modules \ glob \ glob.js '
npm ERR! Если вам нужна помощь, вы можете сообщить об этом журнале по адресу:
    npm ERR! 
    npm ERR! или отправьте его по электронной почте:
    npm ERR!  com>

    npm ERR! Система Windows_NT 6.1.7601
npm ERR! команда "C: \\ Program Files \\ nodejs \\\\ node.exe"
"C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ bin \\ npm-cli.js"
"установить"
"глоток"
"-грамм"
npm ERR! cwd E: \ DropBoxes \ DropBox \ Experts \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome
узел npm ERR! - v v0.8,22
npm ERR! npm - версия 1.2.14
npm ERR! путь C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ findup - sync \ node_modules \ glob \ glob.js
npm ERR! fstream_path C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ findup - sync \ node_modules \ glob \ glob.js
npm ERR! Файл fstream_type
npm ERR! fstream_class FileWriter
npm ERR! fstream_finish_call chmod
npm ERR! код ENOENT
npm ERR! ошибка 34
npm ERR! fstream_stack Writer._finish (C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ fstream \ lib \ writer.js: 305: 19)
npm ERR! fstream_stack Object. oncomplete (fs.js: 297: 15)
npm ERR! Ошибка: ENOENT, откройте 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl-fs \ node_modules \ glob-stream \ README.md'
npm ERR! Если вам нужна помощь, вы можете сообщить об этом журнале по адресу:
    npm ERR! 
    npm ERR! или отправьте его по электронной почте:
    npm ERR! 

    npm ERR! Система Windows_NT 6.1.7601
npm ERR! команда "C: \\ Program Files \\ nodejs \\\\ node.exe"
"C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ bin \\ npm-cli.js "
"установить"
"глоток"
"-грамм"
npm ERR! cwd E: \ DropBoxes \ DropBox \ Experts \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome
узел npm ERR! - v v0.8.22
npm ERR! npm - версия 1.2.14
npm ERR! путь C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl - fs \ node_modules \ glob - stream \ README.md
npm ERR! код ENOENT
npm ERR! ошибка 34
npm ERR! Ошибка: ENOENT, lstat 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl-fs \ node_modules \ vinyl \ package. json '
npm ERR! Если вам нужна помощь, вы можете сообщить об этом журнале по адресу:
    npm ERR! 
    npm ERR! или отправьте его по электронной почте:
    npm ERR! 

    npm ERR! Система Windows_NT 6.1.7601
npm ERR! команда "C: \\ Program Files \\ nodejs \\\\ node.exe"
"C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ bin \\ npm-cli.js"
"установить"
"глоток"
"-грамм"
npm ERR! cwd E: \ DropBoxes \ DropBox \ Experts \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome
узел npm ERR! - v v0.8,22
npm ERR! npm - версия 1.2.14
npm ERR! путь C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl - fs \ node_modules \ vinyl \ package.json
npm ERR! fstream_path C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl - fs \ node_modules \ vinyl \ package.json
npm ERR! Файл fstream_type
npm ERR! fstream_class FileWriter
npm ERR! код ENOENT
npm ERR! ошибка 34
npm ERR! fstream_stack C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ fstream \ lib \ writer. js: 284: 26
npm ERR! fstream_stack Object.oncomplete (fs.js: 297: 15)
npm http 304 https: //registry.npmjs.org/once
    npm ERR! ошибка отката Ошибка: ENOTEMPTY, rmdir 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl-fs \ node_modules \ graceful-fs'
npm ERR! ошибка отката винила - fs @ 0.0.1 {
    [Ошибка: ENOTEMPTY, rmdir 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl-fs \ node_modules \ graceful - fs']
    npm ERR! ошибка отката errno: 53,
        npm ERR! код отката ошибки: 'ENOTEMPTY',
        npm ERR! ошибка отката пути: 'C: \\ Users \\ colecmc \\ AppData \\ Roaming \\ npm \\ node_modules \\ gulp \\ node_modules \\ vinyl-fs \\ node_modules \\ graceful-fs'
}
npm ERR! Ошибка: ENOENT, lstat 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl-fs \ node_modules \ graceful-fs \ polyfills.js '
npm ERR! Если вам нужна помощь, вы можете сообщить об этом журнале по адресу:
    npm ERR!  com/isaacs/npm/issues>
    npm ERR! или отправьте его по электронной почте:
    npm ERR! 

    npm ERR! Система Windows_NT 6.1.7601
npm ERR! команда "C: \\ Program Files \\ nodejs \\\\ node.exe"
"C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ bin \\ npm-cli.js"
"установить"
"глоток"
"-грамм"
npm ERR! cwd E: \ DropBoxes \ DropBox \ Experts \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome
узел npm ERR! - v v0.8,22
npm ERR! npm - версия 1.2.14
npm ERR! путь C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl - fs \ node_modules \ graceful - fs \ polyfills.js
npm ERR! fstream_path C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl - fs \ node_modules \ graceful - fs \ polyfills.js
npm ERR! Файл fstream_type
npm ERR! fstream_class FileWriter
npm ERR! код ENOENT
npm ERR! ошибка 34
npm ERR! fstream_stack C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ fstream \ lib \ writer. js: 284: 26
npm ERR! fstream_stack Object.oncomplete (fs.js: 297: 15)
npm ERR! Ошибка: ENOENT, lstat 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl-fs \ node_modules \ map-stream \ .travis.yml'
npm ERR! Если вам нужна помощь, вы можете сообщить об этом журнале по адресу:
    npm ERR! 
    npm ERR! или отправьте его по электронной почте:
    npm ERR! 

    npm ERR! Система Windows_NT 6.1.7601
npm ERR! команда "C: \\ Program Files \\ nodejs \\\\ node.exe"
"C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ bin \\ npm-cli.js "
"установить"
"глоток"
"-грамм"
npm ERR! cwd E: \ DropBoxes \ DropBox \ Experts \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome
узел npm ERR! - v v0.8.22
npm ERR! npm - версия 1.2.14
npm ERR! путь C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl - fs \ node_modules \ map - stream \ . travis.yml
npm ERR! fstream_path C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ vinyl - fs \ node_modules \ map - stream \ .travis.yml
npm ERR! Файл fstream_type
npm ERR! fstream_class FileWriter
npm ERR! код ENOENT
npm ERR! ошибка 34
npm ERR! fstream_stack C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ fstream \ lib \ writer.js: 284: 26
npm ERR! fstream_stack Object.oncomplete (fs.js: 297: 15)
npm ERR! Ошибка: ENOENT, lstat 'C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ findup-sync \ node_modules \ lodash \ lodash.js'
npm ERR! Если вам нужна помощь, вы можете сообщить об этом журнале по адресу:
    npm ERR! 
    npm ERR! или отправьте его по электронной почте:
    npm ERR! 

    npm ERR! Система Windows_NT 6.1.7601
npm ERR! команда "C: \\ Program Files \\ nodejs \\\\ node.exe"
"C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ bin \\ npm-cli. js "
"установить"
"глоток"
"-грамм"
npm ERR! cwd E: \ DropBoxes \ DropBox \ Experts \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome
узел npm ERR! - v v0.8.22
npm ERR! npm - версия 1.2.14
npm ERR! путь C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ findup - sync \ node_modules \ lodash \ lodash.js
npm ERR! fstream_path C: \ Users \ colecmc \ AppData \ Roaming \ npm \ node_modules \ gulp \ node_modules \ findup - sync \ node_modules \ lodash \ lodash.js
npm ERR! Файл fstream_type
npm ERR! fstream_class FileWriter
npm ERR! код ENOENT
npm ERR! ошибка 34
npm ERR! fstream_stack C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ fstream \ lib \ writer.js: 284: 26
npm ERR! fstream_stack Object.oncomplete (fs.js: 297: 15)
npm http GET https: //registry.npmjs.org/wrappy
    npm http 304 https: //registry.npmjs.org/wrappy
    npm ERR!
    npm ERR! Дополнительные сведения о журнале можно найти в:
    npm ERR! E: \ DropBoxes \ DropBox \ эксперименты \ js \ extensions - chrome \ Eventum - master \ eventum - commit - log - chrome \ npm - debug. log
npm ERR! не в порядке код 0

глотков | PhpStorm

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

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

Перед тем, как начать

Загрузите и установите Node. js.

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

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

  • Глобально установленный пакет 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 из дерева задач

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Последнее изменение: 8 марта 2021 г.

gulpjs / gulp-cli: Интерфейс командной строки для gulp.

Утилита командной строки

для Gulp

Установить 

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

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

> gulp [флаги] <задача> <задача> ...

Пользовательские метаданные

При выводе списка задач с помощью команды gulp -T , gulp-cli отображает некоторые настраиваемые метаданные, определенные для функций задач. Поддерживаемые в настоящее время свойства:

  • task.description — Строка описания для отображения.
 function clean () {...}
clean.description = 'Удаляет сгенерированные файлы.';
  • task.flags — Объект с парами ключ / значение, являющимися флагом / описанием для отображения.
 function build () {...}
build.flags = {
  '--prod': 'Строится в производственном режиме.'
};

Пример использования:

 функция build () {...}
build.description = 'Создать весь проект.';
build.flags = {
  '--prod': 'Строится в производственном режиме (минификация и т. д.).'
};
// глоток 3.x
gulp.task ('построить', построить);
// глоток 4.x
gulp.task (сборка);

Задачи

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

По умолчанию Gulp не сериализует задачи, перечисленные в командной строке. Если вы хотите выполнять задачи последовательно, вы должны указать флаг --series . например gulp clean build - серия

Просто запущенный gulp выполнит задачу по умолчанию . Если нет
по умолчанию задача, gulp выдаст ошибку.

Завершение

Спасибо команде grunt, особенно Тайлеру Келлену

Чтобы включить автозаполнение задач в оболочке, вы должны добавить eval "$ (gulp --completion = shell)" в свой .shellrc файл.

Баш:

Добавьте eval "$ (gulp --completion = bash)" в ~ / .bashrc .

ЗШ:

Добавьте eval "$ (gulp --completion = zsh)" в ~ / .zshrc .

Powershell:

Добавить Invoke-Expression ((gulp --completion = powershell) -join [System.Environment] :: NewLine) до $ PROFILE .

Рыбы:

Добавить глотка --completion = fish | источник с по ~ /. конфиг / рыба / config.fish .

Компиляторы

Список поддерживаемых языков можно найти на https://github.com/js-cli/js-interpret. Если вы хотите добавить поддержку нового языка, отправьте запросы на вытягивание / открытые задачи по этому проекту.

Окружающая среда

Интерфейс командной строки добавляет process.env.INIT_CWD, который является исходным cwd, из которого он был запущен.

Конфигурация

Конфигурация

поддерживается за счет использования файла .gulp. * (например, .gulp.json , .gulp.yml ). Вы можете найти список поддерживаемых языков на https://github.com/js-cli/js-interpret.

Конфигурация из домашнего каталога ( ~ ) и текущего рабочего каталога ( cwd ) объединяется с cwd , имеющим приоритет.

Свойства поддерживаемых конфигураций:

Имущество Описание
описание Описание верхнего уровня проекта / gulpfile (Заменяет «Задачи для ~ / path / of / gulpfile. js «)
flags.continue По умолчанию продолжить выполнение задач после сбоя.
flags.compactTasks Уменьшить вывод дерева зависимостей задач по умолчанию.
flags.tasksDepth Установить глубину дерева зависимостей задач по умолчанию.
flags.gulpfile Установить gulpfile по умолчанию
флаги. Молчание По умолчанию ведение журнала без звука
флагов.серия Выполнять задачи, указанные в интерфейсе командной строки, последовательно (по умолчанию — параллельно)
флаги.требовать Массив модулей, требуемых перед запуском gulpfile. Любые относительные пути будут разрешены относительно каталога --cwd (если вы не хотите такого поведения, используйте абсолютные пути)
flags.nodeFlags Массив флагов, используемых для принудительного возрождения процесса при запуске. Например, если вы всегда хотите, чтобы ваши файлы gulp работали в режиме гармонии узла, вы можете установить здесь --harmony

Флаги

У

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

Некоторые флаги работают только с gulp 4 и будут проигнорированы при вызове против gulp 3.

Флаг Короткий флаг Описание
— справка -h Показать эту справку.
— версия -v Вывести глобальную и локальную версии gulp.
—require [путь] Перед запуском gulpfile потребуется модуль.Это полезно для транспиляторов, но также имеет другие применения.
—gulpfile [путь] -f Путь к gulpfile, задаваемый вручную. Полезно, если у вас несколько файлов gulp. Это также установит CWD в каталог gulpfile.
—cwd [путь] Ручная установка CWD. Отсюда будет поиск gulpfile, а также относительность всего необходимого (включая флаг —require).
—verify [путь (необязательно)] Проверяет плагины, указанные в package.json проекта, по черному списку плагинов.
— задачи -Т Распечатайте дерево зависимостей задач для загруженного файла gulp.
— простые задачи Распечатать список задач в виде открытого текста для загруженного файла gulp.
—tasks-json [путь] Распечатайте дерево зависимостей задач в формате JSON для загруженного файла gulp.Аргумент [путь] является необязательным, и если он указан, записывает JSON в путь.
— глубина задач [число] Укажите глубину распечатываемого дерева зависимостей задач. Этот флаг можно использовать с —tasks или —tasks-json. (Этот флаг раньше назывался —depth, но устарел.)
— компактные Уменьшите вывод дерева зависимостей задач, распечатав только главные задачи и их дочерние задачи.Этот флаг можно использовать с —tasks или —tasks-json.
—сортировка задач Сортировка основных задач дерева зависимостей задач. Этот флаг можно использовать с —tasks.
— цвет Заставит плагины gulp и gulp отображать цвета, даже если поддержка цвета не обнаружена.
— бесцветный Заставит плагины gulp и gulp не отображать цвета, даже если обнаружена поддержка цвета.
— бесшумный -S Подавить регистрацию всех gulp.
— продолжение Продолжить выполнение задач после сбоя.
— серия Выполнять задачи, указанные в интерфейсе командной строки, последовательно (по умолчанию — параллельно).
— уровень журнала -L Установите уровень логирования. -L для наименее подробного и -LLLL для наиболее подробного.-LLL по умолчанию.

Лицензия

MIT

gulp-run-команда — npm

Простой способ запускать программы командной строки из gulp кроссплатформенным способом.

Установка

npm install gulp-run-command

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

 
 import gulp from 'gulp' 
 
 import run from 'gulp-run-command' 
 
 
 
 gulp.task ('clean', run ('rm -rf build')) 
 
 gulp.task ('build', ['clean'], run ('babel index.js --out-file index.es5.js', {
 
 env: {NODE_ENV: 'production'} 
 
}))

API

запустить (команда, параметры)

команд

Тип

: Массив или Строка

Команда будет запущена «как если бы вы набрали ее в консоли». Массив команд будет запускаться последовательно (ожидая завершения каждой до начала следующей), stdin будет пустым для всех команд.Команды будут запускаться так же, как и из сценариев npm , локально установленные модули можно запускать без префикса node_modules / .bin .

options.quiet

тип: Boolean
по умолчанию: false

Установка на true будет игнорировать весь вывод команды (как stdout, так и stderr)

options.ignoreErrors

тип: Boolean
по умолчанию: false

Установка на true игнорирует любые ошибки, которые выдает команда.Он также будет игнорировать возвращаемые значения.

options.cwd

тип: String
по умолчанию: process.cwd ()

Устанавливает текущий рабочий каталог для команды. Здесь ищется node_modules / .bin , а также добавляется к пути.

options.timeout

тип: Число
по умолчанию: undefined (без тайм-аута)

Максимальное время (в миллисекундах), в течение которого команда может выполняться

вариантов.env

тип: Объект
по умолчанию: {}

Этот объект будет добавлен в обычную среду , заменив значения по умолчанию тем, что вы передали. Итак, если ваша «основная» среда включает NODE_ENV = «development» и вы передаете {NODE_ENV: 'production'} , то команда будет запущена с NODE_ENV = "production" .

FAQ

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

Что не так, просто использовать gulp-shell ?
gulp-shell великолепен, но, к сожалению, он использует child_process.exec . Это означает, что вывод плагина буферизируется и выводится только порциями. Это вызывает проблемы с приложениями командной строки, которые ожидают прямого доступа к консоли.(он также имеет тенденцию удалять цвета из вывода). Здесь используется child_process.spawn , который труднее использовать, но работает намного лучше.

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

Поддержка Gulp @ 4
Чтобы использовать gulp-run-command с Gulp @ 4, вам необходимо вызвать функцию возврата после передачи команды и параметров (формально известной как каррирование). Например:

 
 gulp.task ('clean', async () => run ('echo «Hello World!»') ());

Вдохновение

  • Идея пришла в голову gulp-shell , я просто изменил ее базовую реализацию.

Участие

Код написан на ES6 с использованием стандартного стиля Javascript. Не стесняйтесь делать PR, добавляя функции, которые вы хотите, но, пожалуйста, постарайтесь следовать Стандарту. Кроме того, более чем приветствуются PR-сообщения о codumentation / readme!

Лицензия

MIT Авторские права (c) Грегори Беннер

Задача сборки и выпуска

Gulp — Azure Pipelines

  • 2 минуты на чтение

В этой статье

Azure Pipelines | Azure DevOps Server 2020 | Сервер Azure DevOps 2019 | TFS 2018 — TFS 2015

Используйте эту задачу для запуска задач gulp с помощью Node. js потоковая система сборки на основе задач.

Требования

глотка

Фрагмент YAML 

  # глоток
# Запускаем gulp Node.js систему сборки на основе задач потоковой передачи
- задача: глоток @ 1
  входы:
    #gulpFile: 'gulpfile.js'
    #targets: # Необязательно
    #arguments: # Необязательно
    #workingDirectory: # Необязательно
    #gulpjs: # Необязательно
    #publishJUnitResults: false # Необязательно
    #testResultsFiles: '** / TEST - *. xml' # Требуется, если publishJUnitResults == True
    #testRunTitle: # Необязательно
    #enableCodeCoverage: false
    #testFramework: 'Mocha' # Необязательно.Варианты: мокко, жасмин
    #srcFiles: # Необязательно
    #testFiles: 'test / *. js' # Требуется, если enableCodeCoverage == True

Аргументы

Аргумент Описание
gulpFile
gulp Путь к файлу		 (Обязательно) Относительный путь от корня репо скрипта файла gulp, который вы хотите запустить.
Значение по умолчанию: gulpfile.js
цели
глоток Задачи		 (Необязательно) Список выполняемых задач, разделенный пробелами.Если не указан, будет запущена задача по умолчанию.
аргументы
аргументы		 В gulp переданы дополнительные аргументы.
Совет: —gulpfile не нужен, так как уже добавлен через ввод gulpFile выше
cwd
Рабочий каталог		 (Необязательно) Текущий рабочий каталог при запуске сценария. По умолчанию используется папка, в которой находится сценарий.
Псевдонимы аргументов: рабочий каталог
gulpjs
gulp.js расположение		 (Необязательно) Путь к альтернативному файлу gulp.js относительно рабочего каталога.
Псевдонимы аргументов: рабочий каталог
publishJUnitResults
Опубликовать в Azure Pipelines		 Выберите этот параметр, чтобы опубликовать результаты теста JUnit, полученные с помощью сборки gulp, в Azure Pipelines.
Значение по умолчанию: false
testResultsFiles
Test Results Files		 (Обязательно) Путь к файлам результатов тестирования.Можно использовать подстановочные знаки. Например, ** / TEST — *. Xml для всех файлов XML, имя которых начинается с TEST-.
Значение по умолчанию: ** / TEST — *. Xml
testRunTitle
Заголовок тестового прогона		 (Необязательно) Введите имя для тестового прогона
enableCodeCoverage
Включить покрытие кода		 (Необязательно) Выберите этот параметр, чтобы включить покрытие кода с использованием Стамбула
Значение по умолчанию: false
testFramework
Test Framework		 (Необязательно) Выберите свою тестовую среду
Значение по умолчанию: Mocha
srcFiles
Исходные файлы		 (Необязательно) Укажите путь к исходным файлам, которые вы хотите перехватитьRequire ()
testFiles
Файлы тестовых сценариев		 (Обязательно) Укажите путь к файлам тестовых сценариев.
Значение по умолчанию: test / *.js

Пример

Запустите gulp.js

На вкладке Сборка:

Упаковка: npm

Установите npm.

Сборка: gulp

Запустите ваш сценарий.

  • путь к файлу gulp: gulpfile.js
  • Advanced, gulp.js расположение: node_modules / gulp / bin / gulp.js

Создайте узел.js-приложение

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

Открытый исходный код

Эта задача с открытым исходным кодом на GitHub. Отзывы и предложения приветствуются.

FAQ

Нужен ли мне агент?

Для запуска сборки или выпуска необходим хотя бы один агент.

У меня проблемы. Как я могу их устранить?

См. Устранение неполадок при сборке и выпуске.

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

Как я могу это исправить?

См. Пулы агентов.

Моя задача push NuGet завершается ошибкой: «Ошибка: невозможно получить сертификат локального эмитента». Как я могу это исправить?

Это можно исправить, добавив доверенный корневой сертификат. Вы можете либо добавить переменную среды NODE_EXTRA_CA_CERTS = file в свой агент сборки, либо добавить в конвейер переменную задачи NODE.EXTRA.CA.CERTS = file . Подробнее см. Переменные среды.

Начало работы с 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 - сохранить
  
  нпм я глоток --save-dev

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

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

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

  нпм я глоток --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 в Visual Studio

За последнее десятилетие фронтенд-разработка выросла с точки, когда CSS и JavaScript были написаны в плохо организованных файлах, содержащих точный код, который интерпретировал бы браузер, до чего-то, что теперь больше похоже на внутреннюю разработку .

Чистый CSS стал байтовым кодом мира интерфейсов, а языками выбора стали LESS и Sass. Вместо MSBuild для запуска компиляции можно использовать Gulp для автоматизации рабочих процессов для компиляции файлов Sass, их минимизации и выполнения всего остального, что необходимо для создания кода для развертывания (не совсем точное сравнение, но суть вы поняли).

Однако, чтобы действительно достичь зрелой установки разработки, последний шаг — удалить эти «скомпилированные» файлы css и js из системы контроля версий.В конце концов, вы бы не стали регистрировать dll с исходным кодом для каждой сборки. Если вы используете сервер сборки, это относительно простой шаг для добавления в рабочий процесс. Однако более серьезная проблема заключается не в том, чтобы усложнять жизнь вашим внутренним разработчикам.

Без окончательных файлов CSS и JS в системе управления версиями ваши серверные разработчики теперь могут столкнуться с сайтом, на котором отсутствуют все стили и функциональные возможности внешнего интерфейса, когда они нажимают F5. Поскольку LESS и Sass на самом деле не существуют, они теперь не знают, что делать, а также не слишком довольны тем, что им приходится что-то узнавать о внешнем интерфейсе, продолжать работу с ним.Что еще хуже, Visual Studio часто не является выбором внешнего интерфейса разработчика, поэтому копирование настроек внешнего интерфейса также не является идеальным решением.

The Aim

Идеальным решением было бы, чтобы серверный разработчик мог проверить решение из системы управления версиями (не содержащую скомпилированных CSS файлов JS), нажать F5 в Visual Studio, после чего будут созданы окончательные CSS и JS как часть сборки и сайта для запуска. Запрещается открывать командную строку для запуска задачи gulp или любого другого процесса, который могут использовать разработчики интерфейса.Для них это должно быть совершенно незаметно.

Средство выполнения задач Visual Studio

С помощью средства выполнения задач Visual Studios это вполне возможно.

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

Немного предыстории о gulp и средстве выполнения задач

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

В этом примере есть 3 задачи. Первый минимизирует часть JS, а второй минимизирует часть CSS. Третий определяет серию, которая запускает первые 2.

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

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

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

Чтобы запустить задачу, просто щелкните ее правой кнопкой мыши и выберите «Выполнить».

Автоматизация сборки

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

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

Это добавит комментарий в верхнюю часть файла gulpfile.js, который Visual Studio будет искать, чтобы узнать, какую задачу следует запустить перед сборкой.

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

Некоторые другие советы

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

Разработчики внешнего интерфейса, не использующие Visual Studio

Довольно часто Visual Studio не является выбором среды разработки для внешнего разработчика.Одна из проблем, к которой это может привести, — это отсутствие файлов в решении Visual Studio. Однако простое решение этой проблемы — использование подстановочных знаков в файле csproj.

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

CSS / JS не в веб-проекте

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

Простым решением для этого является создание проекта Visual Studio для папки с работой, чтобы к нему было прикреплено событие сборки.

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

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