Gulp jade: Gulp Jade — установка и настройка

Автоматизация работы с Gulp | WebReference

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

Дополнительно в процессе создания сайта происходит много часто повторяющихся действий, таких как обновление страниц для просмотра вносимых изменений. Всё это на деле утомительная и пустая трата времени. Представьте, что у вас есть система, которая делает всё это за вас. При изменении CSS-файла создаётся минимизированная версия и то же самое происходит с JavaScript-файлом. Посмотрите, что вы можете автоматически делать с помощью Gulp:

• минимизировать CSS;
• минимизировать JavaScript;
• сжимать и оптимизировать изображения;
• компилировать файлы Sass, CoffeeScript, Jade;
• автоматически перезагружать браузер, вместо обновления вручную через F5.

Что такое система сборки?

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

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

Также не возникнут проблемы и при управлении фронтенд-библиотеками, вроде jQuery, Backbone, AngularJS. Вы будете использовать то, что называется менеджером пакетов, который берёт заботу на себя. Менеджер пакетов может загрузить библиотеку в папку проекта и при необходимости внедрить её в исходный код. Здорово, не правда ли!

С популярностью препроцессоров, таких как Sass, CoffeeScript, TypeScript, Jade, становится проще извлечь скрытую силу из некоторых родных языков, вроде CSS.

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

Итак, после того как вы написали или пока пишите CSS с Sass, JavaScript с помощью CoffeeScript или TypeScript, а HTML с Jade, вы определяете задачи, которые будут компилировать всё это в родной язык. Вы также напишите задачи, которые будут управлять фронтенд-библиотеками, как упоминалось выше. Но одних задач недостаточно, нам нужна система для запуска этих задач, которая может сказать: «Хорошо, у меня есть работа, давай её выполним».

Вот где появляется инструмент запуска задач. Нам хорошо известно два таких инструмента:

Grunt и Gulp.

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

Вот основные упоминаемые причины, когда речь заходит о том, почему люди отдают предпочтение Gulp, а не Grunt:

Grunt

• Слишком многословен.
• Высокий порог обучения.
• Много настроек.

Gulp

• Быстрый.
• Простой для обучения.
• Приоритет кода над конфигурацией.

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

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

Содержание

Курс «Gulp»: обучение онлайн, 6 уроков

курс

446 студентов 89 сообщений

Последнее обновление: 27 марта 2023

Включено в курс

6 уроков (видео и/или текст)

4 упражнения в тренажере

10 проверочных тестов

Самостоятельная работа

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

Помощь в «Обсуждениях»

Доступ к остальным курсам платформы

Чему вы научитесь

• Создавать задачи для выполнения
• Подключать встроенные и сторонние функции для своих задач
• Использовать цепочку команд внутри одной команды
• Экспортировать цепочки команд для создания задач

Описание

На этом курсе вы изучите таск-менеджер Gulp. Вы узнаете больше об автоматизации выполнения рутинных задач. В итоге вы научитесь создавать задачи для выполнения, использовать сторонние модули для автоматизации компилирования проекта. Gulp пригодится, если вы решите выполнять базовые операции, такие как компиляция SASS, Pug, с помощью одной команды. Знания из этого курса помогают программистам сосредоточится на написании кода с использованием препроцессоров и оставить рутинные дела на таск-менеджер. Этот курс подойдет действующим разработчикам, которые устали от рутинных задач. Чтобы учиться было проще, стоит заранее изучить настройку окружения с помощью NodeJS и базовые знания JavaScript.

JS Gulp Таск-менеджер Автоматизация работы

Программа курса

Продолжительность 6 часов

• Введение

  Узнать о таск-менеджере Gulp и сферах его применения

  теория

• Установка

  Научиться устанавливать Gulp и изучить базовые опции при работе с ним

  теория

• Gulpfile

  Изучить базовую структуру gulpfile. js. Создать свои первые задачи и научиться их экспортировать

  теория

  тесты

  упражнение

• Базовые функции Gulp

  Научиться использовать базовые функции Gulp внутри gulpfile.js. Изучить функции src, dest, series и работу с потоками с помощью Pipe. Разобраться в работе шаблонных строк с использование Globs

  теория

  тесты

  упражнение

• Watch

  Разобраться с тем, как Gulp отслеживает файлы. Научиться использовать функцию watch() для слежения за состоянием файлов и выполнения функций при наступлении определённых событий

  теория

  тесты

  упражнение

• Сторонние пакеты

  Узнать о том, какие популярные пакеты помогут расширить возможности по обработке информации в Gulp. Установить и научиться использовать плагины browser-sync, gulp-sass, gulp-pug

  теория

  упражнение

• Самостоятельная работа

  Дополнительные задания, которые позволяют закрепить полученную теорию

Формат обучения

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

профессия

Верстальщик

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

5 месяцев •

с нуля

Старт в любое время

Галерея NuGet | Retyped.gulp-jade 0.1.6733

Библиотека связывания Gulp Jade (gulp-jade) для проектов Bridge.NET.

Продукт	Версии Совместимые и дополнительные вычисляемые версии целевой платформы.
. NET Framework	нетто40 нет40 совместим. сеть403 net403 вычислялся. нетто45 net45 вычислялся. сеть451 net451 вычислялся. сеть452 net452 вычислялся. сеть46 net46 вычислялся. сеть461 net461 вычислялся. сеть462 net462 вычислялся. сеть463 net463 вычислялся. сеть47 net47 вычислялся. сеть471 net471 вычислялся. сеть472 net472 вычислялся. сеть48 net48 вычислялся. сеть481 net481 вычислялся.

Совместимые целевые платформы

Дополнительные вычисляемые целевые платформы

Узнайте больше о целевых платформах и .NET Standard.

• • Retyped.Core (>= 1.6.6733)

пакеты NuGet

Этот пакет не используется никакими пакетами NuGet.

репозиториев GitHub

Этот пакет не используется никакими популярными репозиториями GitHub.

Версия	загрузок	Последнее обновление
0. 1.6733	892	6/9/2018
0.1.6685	920	21. 04.2018
0.1.6556	775	13.12.2017
0. 1.6532	769	19.11.2017
0.1.6523	751	12. 11.2017
0.1.6477	748	25.09.2017
0. 1.6466	746	14.09.2017
0.1.6465	751	13. 09.2017
0.1.6440	764	19.08.2017

Мопс (Нефрит) | Документация WebStorm

WebStorm интегрируется с механизмом шаблонов Pug (Jade), который преобразует файлы Pug (Jade) в HTML.

Файлы мопсов отмечены ; Файлы Jade помечены .

Прежде чем начать

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

2. Убедитесь, что необходимые плагины Pug (ex-Jade) и File Watchers включены в настройках | Страница «Плагины», вкладка «Установлено», подробности см. в разделе «Управление плагинами».

Установка Pug

Компиляция Pug

Для автоматической компиляции кода вам необходимо настроить Pug/Jade File Watcher, который будет отслеживать изменения в ваших файлах и запускать механизм шаблонов.

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

Если соответствующий File Watcher настроен и включен в текущем проекте, WebStorm автоматически запускает компилятор при возникновении события, указанного в диалоговом окне New Watcher.

• Если установлен флажок Автоматически сохранять отредактированные файлы для срабатывания наблюдателя, наблюдатель за файлами вызывается, как только в исходный код вносятся какие-либо изменения.

• Если флажок Автосохранение отредактированных файлов для срабатывания наблюдателя снят, при сохранении запускается наблюдатель файлов (Файл | Сохранить все, Ctrl+S ) или при перемещении фокуса из WebStorm (при деактивации фрейма).

Узнайте больше от File Watchers.

Создать средство наблюдения за файлами Pug/Jade

1. Откройте диалоговое окно «Настройки» ( Ctrl+Alt+S ) и перейдите в «Инструменты | Наблюдатели за файлами.