Как пользоваться pug?

Question

[Andrew Chil]

Добрый день!
Взялся за изучение jade... на первый взгляд все классно и понятно.
Но все же есть вопросы.
Как использовать js в нем, вроде циклы, if else?
Сейчас имею такой таск в gulp.

gulp.task('jade', function() {
    return gulp.src('build/jade/test1.jade')
        .pipe(jade({
            client: true
        })) // pip to jade plugin
        .pipe(gulp.dest('dest')); // tell gulp our output folder
});

и он не компилирует код из туторіала

- var x = 5;
div
    ul
        - for (var i=1; i<=x; i++) {
        li Hello
        - }

Как это правильно запустить?
Также интересует как правильно их собирать. Сейчас у меня есть главный файл в который импортирует остальные модули и его уже галп компилирует.
И что такое pug file, чем отличаеться от обичного jade?
Всем заранее спасибо)

Answer 1

[Андрей К]

1. Pug — ребрендинг Jade. Был переименован из-за жалобы некоего одноименного бренда, не связанного с IT. Для работы я бы рекомендовал использовать именно его. Синтаксис такой же как и в Jade.

2. Код из туториала в Pug компилируется. Проверьте правильность отступов. Установите Linter, если работаете в Atom/Sublime.

3. Для компиляции использую следующий таск в Gulp:

gulp.task('html', function buildHTML() {
  return gulp.src('app/pug/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('app'));
});

4. Вот примеры нескольких рабочих вариантов с if/else:

- development = false
-
  css = [
    "css/fonts.css",
    "css/header.css",
    "css/style.css",
  ];

if development
    each item in css
        link(rel="stylesheet", href="" + item + "")
else
    script(src="css/style.min.js")

5. На своих проектах делаю такую структуру:
- главный файл index.pug
- каталоги: includes, mixins, regions (из названий должно быть понятно, что они содержат)
- файлы из каталогов инклудятся по мере надобности директивой include.

Comments

[Andrew Chil]

Спасибо)

Answer 2

[Олег]

он не компилирует код из туторіала

Что на выходе? Ошибки? Вам точно нужна опция client: true?

Также интересует как правильно их собирать.

Зависит от структуры проекта. Обычно все делится на блоки.

И что такое pug file, чем отличаеться от обичного jade?

Ребрендинг, об изменениях можно почитать здесь.

Comments

[Andrew Chil]

Сейчас, сли есть client: true, он компилирует все в js-файл, так и должно быть? Если убрать - компилирует в html но js выводит так он написан, ошибок нет. Так чем pug лучше jade или в чем разница? Что использовать?