Вот моя конфигурация gulp:
const gulp = require('gulp')
const {src, dest} = require('gulp')
const flatten = require('gulp-flatten')
const handlebars = require('gulp-handlebars')
const browserSync = require('browser-sync').create()
function browser() {
browserSync.init({
server: {
baseDir: './dist/'
},
port: 3000,
notify: false
})
}
function html() {
return src('./src/pages/*/*.hbs')
.pipe(handlebars())
.pipe(flatten({includeParents: 0}))
.pipe(dest('./dist'))
.pipe(browserSync.stream())
}
const build = gulp.series(html)
const watch = gulp.parallel(build, browser)
exports.html = html
exports.build = build
exports.watch = watch
exports.default = watch
На входе index.hbs
На выходе index.js с непонятным содержимым
Handlebars.template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
return parent[propertyName];
}
return undefined
};
return "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title</title>\r\n</head>\r\n<body>\r\n\r\n"
+ ((stack1 = container.invokePartial(lookupProperty(partials,"header"),depth0,{"name":"header","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
+ "\r\n</body>\r\n</html>\r\n";
},"usePartial":true,"useData":true})
Как получать из hbs => html?
Средний
Простой
