Handlebars

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>

Handlebars

Continue on with Learning Gulp