Главная » Языки программирования

Html to pug gulp

Содержание
  1. gulp-pug
  2. Usage
  3. API
  4. pug([opts])
  5. Also See
  6. Pug. Начало работы. Часть первая из двух
  7. Создание проекта
  8. Установка Pug
  9. Пробуем на зуб
  10. Установка Gulp
  11. Синтаксис Pug
  12. 1. Теги, классы, идентификаторы
  13. 2. Атрибуты элемента
  14. 3. Текст элемента
  15. 4. Буферизация и экранирование
  16. 5. Вывод переменных
  17. 6. Элемент внутри элемента
  18. 7. Комментарии в коде
  19. 8. Подключения (include)
  20. 9. Наследование шаблонов

gulp-pug

Gulp plugin for compiling Pug templates. Enabling you to compile your Pug templates into HTML or JS, with support for template locals, custom Pug filters, AMD wrapping, and others.

Usage

const  src, dest > = require('gulp'); const pug = require('gulp-pug'); exports.views = () =>  return src('./src/*.pug') .pipe( pug( // Your options in here. >) ) .pipe(dest('./dist')); >;

API

pug([opts])

  • opts ( Object ): Any options from Pug’s API in addition to pug ‘s own options.
  • opts.locals ( Object ): Locals to compile the Pug with. You can also provide locals through the data field of the file object, e.g. with gulp-data . They will be merged with opts.locals .
  • opts.data ( Object ): Same as opts.locals .
  • opts.client ( Boolean ): Compile Pug to JavaScript code.
  • opts.pug : A custom instance of Pug for gulp-pug to use.
  • opts.verbose : display name of file from stream that is being compiled.

To change opts.filename use gulp-rename before gulp-pug .

Returns a stream that compiles Vinyl files as Pug.

Also See

  • pug
  • gulp-data : Using locals in your Pug templates easier.
  • gulp-rename : Change opts.filename passed into Pug.
  • gulp-wrap-amd : Wrap your Pug in an AMD wrapper.
  • gulp-frontmatter-wrangler : Useful if you need YAML frontmatter at the top of your Pug file.

Источник

Pug. Начало работы. Часть первая из двух

Pug — это шаблонизатор и html-препроцессор, написанный на javascript для платформы Node.js, с целью ускорения верстки. Это даже быстрее, чем при использовании emmet — так что будет полезен любому веб-разработчику. Тем более, что освоить Pug можно за пару часов, синтаксис достаточно прост и интуитивно понятен.

Создание проекта

Давайте создадим директорию project , а внутри нее еще две директории — src и dist . В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по иконке папки project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».

Установка Pug

Для установки надо выполнить две команды, вторая должна быть выполнена из директории проекта:

> npm install pug --save-dev # из директории проекта

Пробуем на зуб

Создадим в директории src файл index.pug следующего содержания:

html(lang="ru") head meta(charset="utf-8") title= "Pug. Начало работы" body h1 Hello, World!

Переходим в директорию src и выполняем команду:

Чтобы следить за изменениями index.pug — нужно добавить ключ -w :

Установка Gulp

Как работать с gulp — это тема для отдельной статьи, так что без подробностей.

> npm install gulp --save-dev # из директории проекта > npm install gulp-pug --save-dev # из директории проекта

Создаем файл gulpfile.js с тремя задачами для преобразования pug-файлов и отслеживания изменений.

const gulp = require('gulp'); const pug = require('gulp-pug'); gulp.task('pug', function ()  return gulp.src('src/*.pug') .pipe(pug(pretty: true>)) .pipe(gulp.dest('dist')); >); gulp.task('watch', function ()  return gulp.watch('src/**/*.pug', gulp.parallel('pug')) >); gulp.task('default', gulp.parallel('watch'));

Наш файл package.json сейчас имеет только три зависимости:

 "devDependencies":  "gulp": "^4.0.2", "gulp-pug": "^5.0.0", "pug": "^3.0.2" > >

Синтаксис Pug

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

1. Теги, классы, идентификаторы

Давайте создадим маркированный список:

ul li Значение 1 li Значение 2 li Значение 3
  Значение 1 Значение 2 Значение 3

Теперь добавим css-классы нашей разметке:

ul.list li.list__item Значение 1 li.list__item Значение 2 li.list__item Значение 3
class="list"> class="list__item">Значение 1 class="list__item">Значение 2 class="list__item">Значение 3 
ul#items.list li.list__item Значение 1 li.list__item Значение 2 li.list__item Значение 3
id="items" class="list"> class="list__item">Значение 1 class="list__item">Значение 2 class="list__item">Значение 3

2. Атрибуты элемента

Чтобы указать атрибут элементу — достаточно указать его в круглых скобках:

a(href="#", target="_blank") Ссылка a(href="#" target="_blank") Ссылка

Если атрибутов много, то можно указать их многострочными линиями:

input( type='checkbox' name='agreement' checked )

3. Текст элемента

Текст элементу указывается через пробел, после символа | или после точки . :

p.paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit.
p.paragraph | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
p.paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Результат будет одинаковым:

class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4. Буферизация и экранирование

Текст элементу можно присвоить — это что-то вроде работы с переменными. Как будто содержимое элемента — это переменная и мы присваиваем ей значение. При этом значение сперва вычисляется как javascript-выражение. И еще производится экранизация символов < , >и & .

p.paragraph= 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
p.paragraph = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
class="paragraph">Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.

Чтобы избежать экранирования, надо использовать != :

p.paragraph!= 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
p.paragraph != 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit.

5. Вывод переменных

Есть два способа вывести значение переменной — с экранированием символов < , >, & и без экранирования.

- var content = 'ipsum dolor sit amet' p.paragraph Lorem #content>, consectetur adipisicing elit. p.paragraph Lorem !content>, consectetur adipisicing elit.
class="paragraph">Lorem ipsum <em>dolor sit</em> amet, consectetur adipisicing elit. class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit.

6. Элемент внутри элемента

Давайте разместим изображение внутри параграфа:

p.paragraph: img.image(src="picture.jpg" alt="Изображение")
class="paragraph">class="image" src="picture.jpg" alt="Изображение"/>

Еще один пример — параграф, внутри которого и ссылка:

p Lorem ipsum dolor sit amet, consectetur #[a.link(href="page.html") adipisicing] elit.
 Lorem ipsum dolor sit amet, consectetur class="link" href="page.html">adipisicing elit.

7. Комментарии в коде

Однострочный комментарий начинается с символов // — такой комментарий будет виден в итоговом html-коде. Чтобы комментарий не попал в итоговый html-код — он должен начинаться с символов //- .

// Этот комментарий виден в итоговом html-коде p.paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. //- Этот комментарий будет удален из html-кода p.paragraph: img.image(src="picture.jpg" alt="Изображение")
 class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. class="paragraph">class="image" src="picture.jpg" alt="Изображение"/>

8. Подключения (include)

Большим достоинством Pug является возможность подключения отдельных фрагментов кода. То есть можно выносить в отдельные фрагменты кода целые области сайта. Например, вынести в отдельные файлы header , sidebar , content , footer и все это собрать в одном индексном файле.

// файл index.pug doctype html html(lang="ru") head meta(charset="utf-8") title Подключения (include) body include ./parts/header.pug include ./parts/content.pug include ./parts/footer.pug 
// файл parts/header.pug header Это шапка сайта
// файл parts/content.pug div.content main Это основной контент сайта aside Это контент сайдбара сайта
// файл parts/footer.pug footer Это подвал сайта
  lang="ru"> charset="utf-8"> Подключения (include)   Это шапка сайта  class="content"> Это основной контент сайта Это контент сайдбара сайта   Это подвал сайта

9. Наследование шаблонов

Наследование шаблонов работает через ключевые слова block и extend . В родительском шаблоне block — это просто заглушка, которая «резервирует» место. Дочерний шаблон на это «зарезервированное» место вставляет какой-то контент. При этом block в родительском шаблоне может иметь контент по умолчанию. А дочерний шаблон может либо заместить ( replace ) этот контент, либо дополнить его — append и prepend .

Родительский шаблон layout.pug :

block variables - var title = 'Это мой сайт' - var head1 = 'Это заголовок по умолчанию' - var content = 'Это контент страницы по умолчанию' doctype html html(lang="ru") head title #title> block scripts script(src='/js/jquery.js') body block header header Это шапка сайта block content main h1 #head1> div.content p #content> block footer footer Это подвал сайта

Дочерний шаблон contact.pug :

extends layout.pug // этот блок будет замещен (replace) block variables - var title = 'Контакты' - var head1 = 'Контактная информация' - var content = 'Контактная информация: адрес, почта, телефон' // этот блок будет дополнен (append) block append scripts script(src='/js/script.js') // этот блок будет дополнен (prepend) block prepend content // Этот комментарий будет добавлен на страницу в самое начало блока

Итоговый файл contact.html :

 lang="ru">  Контакты src="/js/jquery.js">  src="/js/script.js">    Это шапка сайта   Контактная информация class="content"> Контактная информация: адрес, почта, телефон   Это подвал сайта

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • 1С:Предприятие (31)
  • API (29)
  • Bash (43)
  • CLI (100)
  • CMS (139)
  • CSS (50)
  • Frontend (75)
  • HTML (66)
  • JavaScript (150)
  • Laravel (72)
  • Linux (147)
  • MySQL (76)
  • PHP (125)
  • React.js (66)
  • SSH (27)
  • Ubuntu (68)
  • Web-разработка (509)
  • WordPress (73)
  • Yii2 (69)
  • БазаДанных (95)
  • Битрикс (66)
  • Блог (29)
  • Верстка (43)
  • ИнтернетМагаз… (84)
  • КаталогТоваров (87)
  • Класс (30)
  • Клиент (27)
  • Ключ (28)
  • Команда (69)
  • Компонент (60)
  • Конфигурация (62)
  • Корзина (32)
  • ЛокальнаяСеть (28)
  • Модуль (34)
  • Навигация (31)
  • Настройка (140)
  • ПанельУправле… (29)
  • Плагин (33)
  • Пользователь (26)
  • Практика (99)
  • Сервер (74)
  • Событие (27)
  • Теория (105)
  • Установка (66)
  • Файл (47)
  • Форма (58)
  • Фреймворк (192)
  • Функция (36)
  • ШаблонСайта (68)

Источник

Читайте также:  Best box shadow css
Оцените статью
© 2024 Программирование