Question

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

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

Answer 1

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

这里的示例宽度 gulp 从我的角度来看很容易理解。

首先安装npm个软件包，用于编译pug并监视更改 - 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/'));
});

然后创建观察者

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

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

Answer 2

您现在也可以执行此操作，而无需也gulp-watch。

需要模块：

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

任务示例：

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

观看：

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

然后您可以运行gulp watch。您还可以将watch设置为默认任务，这样，如果您不执行其他操作，就只需在终端中编写gulp：

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

Answer 3

这里是宽度gulp 4.0的示例

安装npm软件包以通过以下命令编译pug / jade

npm install --save gulp-pug。

创建名称为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;

我们可以在您的文件目录中使用以下命令运行以上代码：

gulp pugToHtml

使用PUG生成本地HTML文件（npm / gulp）

3 个答案: