Gulp为多个html页面编译手柄

Gulp-compile-handlebars for multiple html pages?

本文关键字：编译 html Gulp      更新时间：2023-09-26

到目前为止，我只有两个gullow任务，例如gulp.task('handlebars-index')和gulp.task('handlebars-about')。以下是文档中的代码，https://www.npmjs.org/package/gulp-compile-handlebars

我不知道怎样才能处理两个文件的任务。

var gulp = require('gulp');
var handlebars = require('gulp-compile-handlebars');
var rename = require('gulp-rename');
gulp.task('handlebars', function () {
    var templateData = {
        firstName: 'Kaanon'
    },
    options = {
        ignorePartials: true, //ignores the unknown footer2 partial in the handlebars template, defaults to false
        partials : {
            footer : '<footer>the end</footer>'
        },
        batch : ['./src/partials'],
        helpers : {
            capitals : function(str){
                return str.toUpperCase();
            }
        }
    }
    // here how do I add an index.html and say and about.html?
    return gulp.src('src/index.handlebars')
        .pipe(handlebars(templateData, options))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('dist'));
});

您可以看到，在上面的任务中，基本上采用了index.handlers，然后编译它并创建了一个index.html文件。

如果我添加了一个句柄文件数组，该任务将如何知道如何创建.html版本？

    return gulp.src(['src/index.handlebars','src/about.handlebars'])
        .pipe(handlebars(templateData, options))
        .pipe(rename('index.html'))
        .pipe(rename('about.html'))
        .pipe(gulp.dest('dist'));

以上显然是行不通的。

Gulp rename还采用了一个函数，在该函数中，您只能更改部分路径。

return gulp.src('src/*.handlebars')
    .pipe(handlebars(templateData, options))
    .pipe(rename(function(path) {
        path.extname = '.html';
    }))
    .pipe(gulp.dest('dist'));

https://github.com/hparra/gulp-rename#usage

相关文章：