Команды gulp: Документация Gulp на русском

Введение | Gulp

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

При прохождении курсов вы уже познакомились с некоторыми системами, которые помогают разработчикам при вёрстке:

• SASS
• Pug
• Bootstrap

Часто их используют одновременно, ещё и добавляя другие плагины для обработки изображений, обработки файлов после их компиляции и так далее. Чем больше таких систем, тем сложнее становится процесс разработки, ведь необходимо постоянно компилировать файлы после изменений: SASS в CSS, Pug в HTML и так далее. На каждое из этих действий нужна отдельная команда в терминале, и нужно или вручную вводить команду после каждого изменения, или использовать отслеживание, но тогда нужно держать открытыми сразу несколько терминалов.

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

В этом курсе мы рассмотрим Gulp — популярный таск-менеджер, который завоевал огромную любовь среди верстальщиков и стал базовым знанием для комфортной работы. Мы узнаем:

• Как установить Gulp в свой проект
• Что такое gulpfile.js и как он поможет автоматизировать наши задачи
• Разберём базовые команды Gulp, которые доступны без сторонних плагинов
• Научимся устанавливать и подключать сторонние плагины, созданные сообществом
• Узнаем, как Gulp работает с цепочкой задач и как мы можем этим управлять
• Разберёмся с комбинированием различных задач и их отдельным вызовом

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

Gulp — таск-менеджер, который использует язык JavaScript для работы. Если вы не встречались с этим языком или никогда не изучали программирование, то перед прохождением курса советуем:

Открыть доступ

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Рекомендуемые программы

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

Профессия

с нуля

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

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

Не понятна формулировка, нашли опечатку?

Выделите текст, нажмите ctrl + enter и опишите проблему, затем отправьте нам. В течение нескольких дней мы улучшим формулировку или исправим опечатку

Что-то не получается в уроке?

Загляните в раздел «Обсуждение»:

1. Изучите вопросы, которые задавали по уроку другие студенты — возможно, ответ на ваш уже есть
2. Если вопросы остались, задайте свой. Расскажите, что непонятно или сложно, дайте ссылку на ваше решение. Обратите внимание — команда поддержки не отвечает на вопросы по коду, но поможет разобраться с заданием или выводом тестов
3. Мы отвечаем на сообщения в течение 2-3 дней. К «Обсуждениям» могут подключаться и другие студенты. Возможно, получится решить вопрос быстрее!

Подробнее о том, как задавать вопросы по уроку

Установка | Gulp

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

С точки зрения своего внутреннего устройства, Gulp — обычный npm пакет. Похожие пакеты вы уже использовали при работе с SASS, Pug, Bootstrap и каких-то неожиданностей здесь нет. Для установки Gulp нужно иметь установленный NodeJS и пакетный менеджер

npm. Если вы ещё не сталкивались с этим, то перейдите к курсу JS: Настройка окружения.

Для установки Gulp воспользуемся двумя командами:

npm install gulp
npm install gulp-cli

В данном курсе мы будем использовать именно пакет gulp-cli, так как он даёт набор команд для работы внутри терминала. Узнать установленную версию можно командой gulp --version. В курсе будут использованы следующие версии:

npx gulp --version
CLI version: 2. 3.0
Local version: 4.0.2

Можно заметить, что устанавливается не только сам gulp, но и специальная CLI-оболочка к нему, именно поэтому при использовании gulp --version показывается версии двух различных пакетов.

---

Важно: в этом курсе рассматривается Gulp 4, что показывается в Local version. Убедитесь, что после установки версия Gulp не ниже четвёртой. Если вы используете третью версию, то некоторые примеры из этого курса могут не работать или работать некорректно

---

Организация файлов проекта

На протяжении всего курса мы будем работать с «проектом» по вёрстке. Изменять, компилировать файлы и так далее. Для этого стоит создать такой проект, начав с файловой структуры, то есть с расположения и именования директорий и файлов.

Нет строгих стандартов по тому, как должна называться та или иная директория. Gulp так же не даёт правил на этот счёт, но есть устоявшиеся нормы. Одной из них является разделение проекта на версию для разработки и версию для выкладки на сайт. Версия для разработки часто называется src, а готовая версия build. Именно такие директории и будут содержаться в проекте.

При этом директорию build «руками» трогать мы не будем — там автоматически будут появляться файлы и директории после обработки таск-менеджером Gulp.

layout-project/
├── build/
├── src/
│   ├── sass/
│   │   └── app.scss
│   ├── pages/
│   │   ├── index.pug
│   │   ├── sections/
│   │   │   ├── head.pug
│   │   │   └── footer.pug
├── gulpfile.js
├── package.json
└── node_modules/

Открыть доступ

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Рекомендуемые программы

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

Профессия

с нуля

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

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

Не понятна формулировка, нашли опечатку?

Выделите текст, нажмите ctrl + enter и опишите проблему, затем отправьте нам. В течение нескольких дней мы улучшим формулировку или исправим опечатку

Что-то не получается в уроке?

Загляните в раздел «Обсуждение»:

1. Изучите вопросы, которые задавали по уроку другие студенты — возможно, ответ на ваш уже есть
2. Если вопросы остались, задайте свой. Расскажите, что непонятно или сложно, дайте ссылку на ваше решение. Обратите внимание — команда поддержки не отвечает на вопросы по коду, но поможет разобраться с заданием или выводом тестов
3. Мы отвечаем на сообщения в течение 2-3 дней. К «Обсуждениям» могут подключаться и другие студенты. Возможно, получится решить вопрос быстрее!

Подробнее о том, как задавать вопросы по уроку

Глоток | IntelliJ IDEA

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

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

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

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

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

Чтобы использовать Gulp в проекте IntelliJ IDEA, вам потребуются два пакета:

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

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

Глобальная установка gulp-cli

Установка Gulp.js в проекте

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

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

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

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

Открытие окна инструмента Gulp

При первом построении дерева задач в течение текущего сеанса IntelliJ IDEA окно инструмента Gulp еще не открывается.

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

Построить дерево задач из ES6 Gulpfile.js

1. В главном меню выберите «Выполнить | Изменить конфигурации. Либо выберите «Редактировать конфигурации» из списка на панели инструментов.

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

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

Построить дерево задач из окна инструмента Gulp

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

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

Перестроить дерево

Сортировка задач в дереве по их именам

• Щелкните на панели инструментов, выберите Сортировать в меню, а затем выберите Имя.

  По умолчанию в дереве задачи отображаются в том порядке, в котором они определены в Gulpfile.js (опция Порядок определения).

Запустить задачу

Запустить задачу по умолчанию

Запустить несколько задач

Перейти к определению задачи

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

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

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

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

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

Создайте конфигурацию запуска Gulp.js

1. В главном меню выберите Run | Изменить конфигурации. Либо выберите «Редактировать конфигурации» из списка на панели инструментов.

   В открывшемся диалоговом окне «Редактировать конфигурации» нажмите кнопку «Добавить» () на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Выполнить/отладить конфигурацию: Gulp.js».

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

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

Последнее изменение: 23 мая 2022 г.

Поиск документации по Grunt JavaScript

Инструменты сборки | Semantic UI

30 секунд Объяснение

Загрузка Semantic UI перейдите в папку установки и выполните команду gulp.

Для сборки всех файлов:

gulp build

Отслеживание изменений

gulp watch

Зачем нужны инструменты для сборки?

Semantic UI использует Gulp по нескольким причинам:

Обработка файлов LESS с переменными тем

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

Отслеживание изменений файлов и перестроение необходимых файлов при настройке тем минифицированные и объединенные выпуски могут находиться в разных каталогах

Разрешить пользовательские сборки только с необходимыми компонентами для вашего сайта

Разрешить расширенное использование, например языки с письмом справа налево (RTL) с использованием RTLCSS

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

Тема вашего сайта

Тема по умолчанию

Дополнительные темы

Файл конфигурации для настройки упакованных тем

Скомпилированные CSS и JS -файлы

Индивидуальные компоненты и JS

.0003

составной выпуск

составной выпуск

Содержит настройки сборки для gulp

Команды Gulp

Ниже приведен список всех доступных команд gulp

9026 Описание установить Задает вопросы по установке для настройки semantic.json часы (по умолчанию) Отслеживает изменения в исходных файлах и создает файл при изменении сборка Собрать все файлы чистый Очищает папку dist/ версия Выводит текущую версию сборка-javascript Сборка JS-файлов сборка CSS Создание файлов CSS строительные активы Файлы ресурсов сборки служить-документы Подает файлы в локальный экземпляр документов документация по сборке Создает файлы в папку docs

semantic.

json

Настройки инструмента сборки хранятся в специальном файле с именем semantic.json Он может быть включен в любую папку, которая находится в родительской папке папки семантической установки.

Если вы использовали npm или метеор, файл semantic.json автоматически создается для вас в корне вашего проекта. Если вы использовали другой менеджер пакетов, вы можете запустить gulp install , чтобы запустить интерактивный установщик.

{ // базовый путь добавляется ко всем другим путям, указанным в «paths» «база»: «», // текущая версия Semantic UI «версия»: «2.5.0», «пути»: { «источник»: { // исходный файл theme.config «config» : «src/theme.config», // исходная папка определения «определения» : «источник/определения/», // исходная тема сайта «сайт»: «источник/сайт/», // исходная папка тем «темы»: «источник/темы/» }, «выход»: { // упакованный исходный код (как сжатый, так и несжатый) «упаковано»: «расстояние/», // несжатый источник «несжатый»: «расстояние/компоненты/», // сжатый исходный код «сжатый»: «расстояние/компоненты/», // выходной каталог для ресурсов темы «темы» : «расстояние/темы/» }, // каталог для задачи очистки gulp «чистый»: «расстояние/» }, // если установлено целочисленное разрешение, будут установлены файлы dist с этим разрешением файла «разрешение»: ложь, // должен ли gulp watch/build запускать RTLCSS «rtl»: ложь, // будут включены только компоненты с этими именами «составные части»: [ «перезагрузить», «сайт», «кнопка», «контейнер», «делитель», «флаг», «заголовок», «значок», «изображение», «вход», «этикетка», «список», «загрузчик», «рельс», «показывать», «сегмент», «шаг», «хлебные крошки», «форма», «сетка», «меню», «сообщение», «стол», «объявление», «открытка», «комментарий», «подача», «вещь», «статистика», «аккордеон», «флажок», «диммер», «падать», «встроить», «модальный», «ворчание», «выскакивать», «прогресс», «рейтинг», «поиск», «форма», «боковая панель», «липкий», «вкладка», «переход», «апи», «государство», «видимость» ], // следует ли включать специальные задачи сопровождающего проекта «админ»: ложь }

theme.