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

Question

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

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

Answer 1

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

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

首先安装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/'));
});

然后创建观察者

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