How to use pug?

Question

Pug

Good afternoon!
I took up the study of jade ... at first glance, everything is cool and understandable.
But still there are questions.
How to use js in it, like loops, if else?
Now I have such a task in 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
});

and it doesn't compile the code from the tutorial

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

How to run it correctly?
Also interested in how to collect them correctly. Now I have a main file that imports the rest of the modules and galp compiles it.
And what is a pug file, how does it differ from the usual jade?
Thank you all in advance)

Answer 1

1. Pug is a rebranding of Jade. It was renamed due to a complaint from a non-IT brand of the same name. For work, I would recommend using it. The syntax is the same as in Jade.
2. The code from the tutorial in Pug is compiled. Check if the indentation is correct. Install Linter if you are using Atom/Sublime.
3. For compilation I use the following task in Gulp:

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

4. Here are examples of several working options with 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. I make the following structure on my projects:
- the main index.pug file
- directories: includes, mixins, regions (from the names it should be clear what they contain)
- files from directories are included as needed by the include directive.

Answer 2

it does not compile the code from the tutorial

What's the output? Mistakes? Are you sure you want the client: true option ?
Depends on the structure of the project. Usually everything is divided into blocks.
Rebranding, you can read about the changes here .