使用 PUG (npm / gulp) 生成本地 HTML 文件答案

【问题标题】：Generate a local HTML file with PUG (npm / gulp)使用 PUG (npm / gulp) 生成本地 HTML 文件
【发布时间】：2017-08-17 11:46:40
【问题描述】：

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

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

【问题讨论】：

标签： javascript html npm gulp pug

【解决方案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。

【讨论】：

【解决方案2】：

这里是一个示例宽度 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

【讨论】：

【解决方案3】：

您现在也可以在不需要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']);

【讨论】：