Gulp如何将Pug预处理器和Pug渲染添加到HTML？

如何解决Gulp如何将Pug预处理器和Pug渲染添加到HTML？

如何添加哈巴狗？保持跟踪和更新哈巴狗的内容并转换为scr文件夹中的html？ 是否可以区分任务？观看并构建单独的任务？在此处输入代码

这是我用来创建gulp模板的代码

在此先感谢您帮助我进行大口吃 是否有关于这些问题的详细教程，以后我会遇到什么问题？

const rename = require('gulp-rename');

let project_folder = "dist";
let source_folder = "#src";

let path = {
    build: {
        html: project_folder + "/",css: project_folder + "/css/",js: project_folder + "/js/",img: project_folder + "/img/",fonts: project_folder + "/fonts/",},src: {
        html: [source_folder + "/views/*.html","!" + source_folder + "/views/_*.html"],css: source_folder + "/stylus/style.styl",js: source_folder + "/js/script.js",img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",fonts: source_folder + "/fonts/*.ttf",watch: {
        html: source_folder + "/**/*.html",css: source_folder + "/stylus/**/*.styl",js: source_folder + "/js/*.js",webp} "
    },clean: "./" + project_folder + "/"
}

let { src,dest } = require('gulp'),gulp = require('gulp'),browsersync = require("browser-sync").create();
fileinclude = require("gulp-file-include");
del = require("del");
stylus = require("gulp-stylus");
auto_prefixer = require("gulp-autoprefixer");
group_media = require("gulp-group-css-media-queries");
clean_css = require("gulp-clean-css");
rename_file = require("gulp-rename");
uglify = require("gulp-uglify-es").default;
imagemin = require("gulp-imagemin");
webp = require("gulp-webp");
webphtml = require("gulp-webp-html");
webpcss = require("gulp-webpcss");
svgSprite = require("gulp-svg-sprite");

// pug = require("gulp-pug")

function browserSync(params) {
    browsersync.init({
        server: {
            baseDir: "./" + project_folder + "/"
        },port: 3000,notify: false
    })
}

function html() {
    return src(path.src.html)
        .pipe(fileinclude())
        .pipe(webphtml())
        .pipe(dest(path.build.html))
        .pipe(browsersync.stream())
}

function images() {
    return src(path.src.img)
        .pipe(
            webp({
                quality: 70
            })
        )
        .pipe(dest(path.build.img))
        .pipe(src(path.src.img))
        .pipe(
            imagemin({
                progressive: true,svgoPlugins: [{ removeViewBox: false }],interlaced: true,optimizationLevel: 3 // 0 to 7
            })
        )
        .pipe(dest(path.build.img))
        .pipe(browsersync.stream())
}

function css() {
    return src(path.src.css)
        .pipe(
            stylus({
                // Сжатие css в dist
                compress: false,})
        )
        .pipe(group_media())
        .pipe(
            auto_prefixer({
                overridebrowserslist: ["last 5 version"],cascade: true
            })
        )
        .pipe(webpcss())
        .pipe(dest(path.build.css))
        .pipe(clean_css())
        .pipe(
            rename_file({
                extname: ".min.css"
            })
        )
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream())
}

function js() {
    return src(path.src.js)
        .pipe(fileinclude())
        .pipe(dest(path.build.js))
        .pipe(
            uglify()
        )
        .pipe(
            rename_file({
                extname: ".min.js"
            })
        )
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream())
}

function clean(params) {
    return del(path.clean);
}
gulp.task('svgSprite',function() {
    return gulp.src([source_folder + '/iconsprite/*.svg'])
        .pipe(svgSprite({
            mode: {
                stack: {
                    sprite: "../icons/icon.svg",//Название файла для спрайтов
                    example: true
                },}
        }))
        .pipe(dest(path.build.img))
})

function watchFiles(params) {
    gulp.watch([path.watch.html],html);
    gulp.watch([path.watch.css],css);
    gulp.watch([path.watch.js],js);
    gulp.watch([path.watch.img],images);
}

let build = gulp.series(clean,gulp.parallel(html,css,js,images));
let watch = gulp.parallel(build,watchFiles,browserSync);

exports.html = html;
exports.js = js;
exports.css = css;
exports.images = images;

exports.build = build;
exports.watch = watch;
exports.default = watch;```