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.org/package/gulp-compile-handlebars
I am not sure how I can handle the task for two .handlebars files.
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'));
});
You can see with the above the task basically takes the index.handlebars then compiles 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.
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'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.