javascript - 使用 PUG (npm/gulp) 生成本地 HTML 文件

Question

如何在每次使用 gulp 保存时创建一个与我的 pug 文件同名的 HTML 文件？

https://pugjs.org/ 上的所有文档解释如何在控制台中返回哈巴狗...

Answer 1

为此，您需要任务运行器或模块 bundler 。所以选择一个-grunt/gulp/webpack。将 webpack 视为最新的和宽度最好的功能。

这里有一个宽度 gulp 的例子，从我的 Angular 来看很容易理解。

首先安装用于编译 pug 的 npm 包并观察变化 - npm install --save gulp-pug gulp-watch。

然后创建并配置您的 gulpfile.js。

首先导入一个npm模块

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

然后创建编译任务

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

然后创建watcher

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

然后从您的控制台运行 gulp-watch。