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.

Answer 2

You can now do the same without requiring gulp-watch as well.

Require module:

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

Task example:

//create task
gulp.task('pug', function buildHTML(){
 gulp.src('src/pre/*.pug')
 .pipe(pug())
 .pipe(gulp.dest('src/post'));
});

Watch:

//pug serve
gulp.task('watch', ['pug'], function() {
gulp.watch(['src/pug-pre/*.pug'], ['pug']);
});

You can then run gulp watch . You can also set watch to the default task so you only have to write gulp in Terminal, if you are not automating anything else:

// default task
gulp.task('default', ['watch']);

Answer 3

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