How to compile PUG on the fly in VScode?

Question

Layout

I want to be able to compile html files from Pug, just like it does with SCSS Live Sass Compiler.
I found the Live Pug Compiler plugin, but it drags everything at once, also with folders (in the case of Sass, the issue is solved by adding an underscore to the file).
I don't know how to webpack. Yes, it is necessary, but now the question is not about him.

Answer 1

Then it's easier to collect the Gulp config and not suffer like that. Here is an example. Organize the project as follows (everything can be called whatever you like, only the config will need to be changed).

Project
 ├ Sources
 │  ├ Styles
 │  ├ Scripts
 │  ├ Images
 │  └ index.html
 ├ package.json
 └ gulpfile.js

Required packages

npm i gulp gulp-if gulp-pug gulp-htmlmin gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-clean-css gulp-babel gulp-concat gulp-uglify gulp-image gulp-clean browser-sync yargs node-sass @babel/core @babel/preset-env -D

Commands:
gulp --development- project build, server start, live reload.
gulp --series clear build --production- project assembly, compression, image optimization.

gulpfile

const gulp = require('gulp');
const pipeIf = require('gulp-if');
const pug = require('gulp-pug');
const minify = require('gulp-htmlmin');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const clean = require('gulp-clean-css');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const image = require('gulp-image');
const clear = require('gulp-clean');
const browser = require('browser-sync').create();
const { argv } = require('yargs');

sass.compiler = require('node-sass');

gulp.task('server', (callback) => {
  browser.init({
    server: {
      baseDir: 'Build/'
    },
    notify: false
  });

  callback();
});

gulp.task('reload', (callback) => {
  browser.reload();

  callback();
});

gulp.task('clear', () => {
  return gulp.src('Build', { allowEmpty: true })
    .pipe(clear({
      force: true
    }));
});

gulp.task('build:html', () => {
  return gulp.src(['Sources/*.html', 'Sources/*.pug'])
    .pipe(pug())
    .pipe(pipeIf(argv.production, minify({ collapseWhitespace: true })))
    .pipe(gulp.dest('Build/'));
});

gulp.task('build:sass', () => {
  return gulp.src(['Sources/Styles/*.sass', 'Sources/Styles/*.scss'])
    .pipe(pipeIf(argv.development, sourcemaps.init()))
    .pipe(sass())
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(pipeIf(argv.production, clean()))
    .pipe(pipeIf(argv.development, sourcemaps.write('.')))
    .pipe(gulp.dest('Build/Styles/'));
});

gulp.task('build:js', () => {
  return gulp.src('Sources/Scripts/**/*.js')
    .pipe(pipeIf(argv.development, sourcemaps.init()))
    .pipe(concat('main.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(pipeIf(argv.production, uglify()))
    .pipe(pipeIf(argv.development, sourcemaps.write('.')))
    .pipe(gulp.dest('Build/Scripts/'));
});

gulp.task('build:images', () => {
  return gulp.src(['Sources/Images/**/*.png', 'Sources/Images/**/*.jpg', 'Sources/Images/**/*.svg'])
    .pipe(pipeIf(argv.production, image()))
    .pipe(gulp.dest('Build/Images/'));
});

gulp.task('watch:html', () => {
  gulp.watch(['Sources/**/*.html', 'Sources/**/*.pug'], gulp.series('build:html', 'reload'));
});

gulp.task('watch:sass', () => {
  gulp.watch(['Sources/Styles/**/*.sass', 'Sources/Styles/**/*.scss'], gulp.series('build:sass', 'reload'));
});

gulp.task('watch:js', () => {
  gulp.watch('Sources/Scripts/**/*.js', gulp.series('build:js', 'reload'));
});

gulp.task('watch:images', () => {
  gulp.watch(['Sources/Images/**/*.png', 'Sources/Images/**/*.jpg', 'Sources/Images/**/*.svg'], gulp.series('build:images'));
});

gulp.task('build', gulp.parallel('build:html', 'build:sass', 'build:js', 'build:images'));

gulp.task('watch', gulp.parallel('watch:html', 'watch:sass', 'watch:js', 'watch:images'));

gulp.task('default', gulp.series('clear', 'build', 'server', 'watch'));