For our next magic trick, we are going to generate html files from Handlebar templates.
We are first going to create our Handlebars template for our pages.
Rename our index.html
file to index.hbs
<!-- /contents/index.hbs -->
<html>
<head>
<title>Learning Gulp</title>
<link rel="stylesheet" href="/styles/main.min.css" />
</head>
<body>
<h1>{{ title }}</h1>
</body>
</html>
This is where things get interesting. Instead of using a gulp plugin to manage the conversion, we are going to use another plugin gulp-tap
to do some custom operations.
$ npm install handlebars --save-dev
$ npm install gulp-tap --save-dev
We need to modify our homepage
task to now use tap
and Handlebars
.
// /gulpFile.js
...
var tap = require('gulp-tap');
var Handlebars = require('Handlebars');
...
gulp.task('homepage', ['clean'], function() {
return gulp.src("contents/index.hbs")
.pipe(tap(function(file, t) {
var template = Handlebars.compile(file.contents.toString())
var html = template({ title: "Gulp + Handlebars is easy"})
file.contents = new Buffer(html, "utf-8")
}))
.pipe(gulp.dest("build"));
});
Let’s review the code above.
- We load the specific
index.hbs
file. - Using
tap
we read the file’s contents as a string. - We then compile that string as a Handlebars template
- We pass in a JavaScript object with the data we want to pass into the Handlebars template. In this case, it is an object with a
title
property to be used by{{ title }}
. - We take the html returned by Handlebars and return that as the file contents.
Now since we have traced the code and understand the steps, we can run the gulp task.
$ gulp homepage
Using gulpfile ~/YOUR_DIRECTORY/gulpFile.js
Starting 'clean'...
Clean all files in build folder
Finished 'clean' after 17 ms
Starting 'homepage'...
Finished 'homepage' after 2.82 ms
You should now be able to find the page we created.
<!-- /build/pages/index.hbs -->
<html>
<head>
<title>Learning Gulp</title>
<link rel="stylesheet" href="/styles/main.min.css" />
</head>
<body>
<h1>Gulp + Handlebars is easy</h1>
</body>
</html>
Hmm… it kept the hbs file extension. Let’s fix that. Another plugin to the rescue!
$ npm install gulp-rename --save-dev
We then use the gulp-rename
plugin to rename the file extension from .md
to .html
.
...
var rename = require('gulp-rename');
...
gulp.task('homepage', ['clean'], function() {
return gulp.src("contents/index.hbs")
.pipe(tap(function(file, t) {
var template = Handlebars.compile(file.contents.toString())
var html = template({ title: "Gulp + Handlebars is easy"})
file.contents = new Buffer(html, "utf-8")
}))
.pipe(rename(function(path) {
path.extname = ".html"
}))
.pipe(gulp.dest("build"));
});
$ gulp homepage
Using gulpfile ~/YOUR_DIRECTORY/gulpFile.js
Starting 'clean'...
Clean all files in build folder
Finished 'clean' after 11 ms
Starting 'homepage'...
Finished 'homepage' after 23 ms
And now we should have the desired html
file extension.
<!-- /build/pages/index.html -->
<html>
<head>
<title>Learning Gulp</title>
<link rel="stylesheet" href="/styles/main.min.css" />
</head>
<body>
<h1>Gulp + Handlebars is easy</h1>
</body>
</html>