diff --git a/gulpfile.js b/gulpfile.js
index cd75adf06fa..d088b90a8e4 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -16,6 +16,7 @@ const sass = require('sass')
 const gulp = require('gulp')
 const tap = require('gulp-tap')
 const zip = require('gulp-zip')
+const pug = require('gulp-pug')
 const header = require('gulp-header')
 const eslint = require('gulp-eslint')
 const minify = require('gulp-clean-css')
@@ -286,6 +287,10 @@ gulp.task('package', gulp.series(() =>
 
 ))
 
+gulp.task('pug', () => gulp.src(['*.pug', '**/*.pug'])
+    .pipe(pug())
+    .pipe(gulp.dest('./')));
+
 gulp.task('reload', () => gulp.src(['*.html', '*.md'])
     .pipe(connect.reload()));
 
@@ -300,6 +305,8 @@ gulp.task('serve', () => {
 
     gulp.watch(['*.html', '*.md'], gulp.series('reload'))
 
+    gulp.watch(['*.pug', '**/*.pug'], gulp.series('pug', 'reload'))
+
     gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))
 
     gulp.watch(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
@@ -316,4 +323,4 @@ gulp.task('serve', () => {
 
     gulp.watch(['test/*.html'], gulp.series('test'))
 
-})
\ No newline at end of file
+})
diff --git a/package.json b/package.json
index 1ffee19b204..689c7f444c3 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "gulp-connect": "^5.7.0",
     "gulp-eslint": "^6.0.0",
     "gulp-header": "^2.0.9",
+    "gulp-pug": "^5.0.0",
     "gulp-tap": "^2.0.0",
     "gulp-zip": "^4.2.0",
     "highlight.js": "^10.0.3",