最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Gulp-compile-handlebars for multiple html pages? - Stack Overflow

programmeradmin6浏览0评论

As of now I just have two gulp tasks, ex gulp.task('handlebars-index'), gulp.task('handlebars-about'). Below is code from the docs,

I am not sure how I can handle the task for two .handlebars files.

var gulp = require('gulp');
var handlebars = require('gulp-pile-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'));
});

You can see with the above the task basically takes the index.handlebars then piles it and creates an index.html file.

If I added an array of handlebar files how will the task know how to create the .html version?

    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'));

The above won't work obviously.

As of now I just have two gulp tasks, ex gulp.task('handlebars-index'), gulp.task('handlebars-about'). Below is code from the docs, https://www.npmjs/package/gulp-pile-handlebars

I am not sure how I can handle the task for two .handlebars files.

var gulp = require('gulp');
var handlebars = require('gulp-pile-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'));
});

You can see with the above the task basically takes the index.handlebars then piles it and creates an index.html file.

If I added an array of handlebar files how will the task know how to create the .html version?

    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'));

The above won't work obviously.

Share Improve this question asked Oct 14, 2014 at 15:23 Michael Joseph AubryMichael Joseph Aubry 13.5k16 gold badges77 silver badges140 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

Gulp-rename also takes a function where you can change only part of the path.

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

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

发布评论

评论列表(0)

  1. 暂无评论