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

Question

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

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

Answer 1

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

下面的例子宽度一饮而尽为moust容易地从我的角度理解.

首先安装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 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