Generate a local HTML file with PUG (npm / gulp)

Here an example width gulp 4.0

install npm packages for compiling pug/jade by following command

npm install --save gulp-pug .

create script with name gulpfile.js

    //gulpfile.js
    var gulp = require("gulp"), pug = require('gulp-pug');

    function pugToHtml(){
       return gulp.src('src')
      .pipe(pug({
         pretty: true
      }))
      .pipe(gulp.dest('dest'));
    }
    exports.pugToHtml = pugToHtml;

We can run the above code using the following command in your file directory:

gulp pugToHtml

You need task runner or module bundler for that. So choose one -grunt/gulp/webpack. Consider webpack as newest one and width best functionality.

Here an example width gulp as moust easy to understand from my point of view.

First install npm packages for compiling pug and watch for changes - npm install --save gulp-pug gulp-watch.

Then create and config your gulpfile.js.

First import an npm modules

var pug = require('gulp-pug');
var watch = require('gulp-watch');

Then create compiling task

gulp.task('pug',function() {
 return gulp.src('PATH_TO_TEMPLATES/*.jade')
 .pipe(pug({
    doctype: 'html',
    pretty: false
 }))
 .pipe(gulp.dest('./src/main/webapp/'));
});

And then create watcher

gulp.task('watch', function () {
 return watch('PATH_TO_TEMPLATES/*.jade', { ignoreInitial: false })
    .pipe(gulp.dest('pug'));
 });

And run gulp-watch from you console.