gulp-hbs-router v1.0.6
gulp-hbs-router
Gulp plugin that runs like a router, converting template language into HTML.
Why you need?
- When you don't want to use some frontend framwork like react, vue, angular... cuz your website actually isn't need it...
- Multiple pages controlled by module.
- If you are a senior frontend-er. You should try!
Install
npm install gulp-hbs-router --save-devUsage
const gulpHbsRouter = require('gulp-hbs-router');
gulp.src('./layout/**/*.hbs')
.pipe(gulpHbsRouter({
cwdPath: `${__dirname}/`,
routerPath: 'hbsRouter.js',
partialPath: 'partial.js',
minify: true,
}))
.pipe(gulp.dest('./'))You have to create ./hbsRouter.js ./partial.js
hbsRouter.js : Listing all Templata DATA here. You can set data(object) in this file, and each data correspond into its file independently.
Default: './hbsRouter.js'.partial.js : You should write your partial here. Then, router will catch partial by this file in handlebars.
Default: './partial.js'.
How to write? Look Example.
API
gulpHbsRouter(, options)
cwdPath (default
../../) In gulp-hbs-router, we should get data from'hbsRouter.js'and partial from'partial.js', so we need to set thecwdPathrouterPath (default
'hbsRouter.js') set router's path.partialPath (default
'partial.js') set partial's path.minify (default
false) set to minify html.compile (default to
handlebars.compile) compile options. See handlebars reference for possible values
gulpHbsRouter.registerHelper(name, helperFn)
Register a handlebars helper.
Example
gulpfile.js
const gulp = require('gulp');
const gulpHbsRouter = require('gulp-compile-handlebars');
const gulpPlumber = require('gulp-plumber');
gulp.task('hbs', () => {
gulp.src(['./layout/**/*.hbs'])
.pipe(gulpPlumber())
.pipe(gulpPlumber())
.pipe(gulpHbsRouter({
cwdPath: `${__dirname}/`,
minify: true,
}))
.pipe(gulp.dest('./'));
})./hbsRouter.js
const hbsRouter = {
home: {
description: 'I love home.',
title: 'Home',
},
index: {
description: 'Simple router',
title:'Gulp-Hbs-Router Example',
}
};
module.exports = hbsRouter;./partial.js
const fs = require('fs');
const DEFAULT_PATH = 'partial/';
module.exports = (hbs) => {
hbs.registerPartial('head', getPartials('head.hbs', DEFAULT_PATH));
hbs.registerPartial('footer', getPartials('footer.hbs', DEFAULT_PATH));
};
function getPartials(filename, path) {
const template = fs.readFileSync(`./layout/${path}${filename}`, 'utf8');
return template;
}./layout/index.hbs ./layout/home.hbs
<head>
{{> head}}
<title>{{title}}</title>
</head>
<body>
<h1>Hi, {{title}}</h1>
{{> footer}}
</body>./layout/partial/head.hbs
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
<meta htt0-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name="description" content="{{description}}" >./layout/partial/footer.hbs
<footer>
<h1>The end!</h1>
</footer>You have to add in STRUCTURE
...
- gulpfile.js
- hbsRouter.js
- partial.js
- layout/
- index.hbs
- home.hbs
partial/
- head.hbs
- footer.hbs
...