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

Question

How to create a HTML file with the same name as my pug file each time I save using gulp?

All the docs on https://pugjs.org/ explain how to return pug in console...

Answer 1

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.