Gulp Haml Include HTML as a partial

Question

I'm using gulp to render haml using gulp-haml-coffee

I want to do something like this:

header.html

    <!doctype html>
    
    <html lang="en">
    <head>
      <meta charset="utf-8">
    
      <title>Website Title</title>
    
      <link rel="stylesheet" href="style.css?v=1.0">
    </head>

home.haml

   INCLUDE header.html
   .content
       Regular Haml Content
   INCLUDE footer.html

footer.html

</body>
</html>

The tricky part for me is that it is a mix of HTML and Haml and I want them to be combined into one file automatically using Gulp.

Here is the current Gulp task:

// HAML
gulp.task('haml', function() {
    return gulp.src('app/source/**/*.haml')
    .pipe(customPlumber('HAML Error'))
    .pipe(sourcemaps.init())
    .pipe(haml({trace:true}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./app/compiled'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

The haml conversion is working but I can't figure out how to include plain HTML files as part of the conversion.

I'm going to be creating several other haml files (about, contact, etc.)

This is what I would want the rendered HTML to be:

home.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Website Title</title>

  <link rel="stylesheet" href="style.css?v=1.0">
</head>

<div class="content">
    Regular Haml Content
</div>

</body>
</html>

Vlad Gor Vlad Gor · Accepted Answer · 2017-06-21T12:26:55

With gulp-haml Impossible to compile Ruby code like:

= Haml::Engine.new(File.read('./includes/menu-main.haml')).render

because gulp-haml has no full Ruby engine functionality. If you want to use Ruby, download it and install, then install haml for it (but Ruby requests are very slow ~1-3s). Or, use some other templater, like gulp-file-include, so you can compile then include your compiled .HTML files (im using gulp-jhaml, it has same features with gulp-haml):

var haml        = require('gulp-jhaml'),
    gih         = require('gulp-include-html'),
    browserSync = require('browser-sync');

gulp.task('haml', function() {
  return gulp.src(['source-folder/*.haml'])
    .pipe(haml({}, {eval: false}))
    .on('error', function(err) {
      console.error(err.stack) 
    })
    .pipe(gulp.dest('source-folder/html'));
});
gulp.task('html-include', ['haml'], function () {  
  gulp.src(['source-folder/html/*.html'])
    .pipe(gih({
      prefix: '@@'
    }))
    .pipe(gulp.dest('result-folder'));
});
gulp.task('watch', ['html-include', 'browser-sync'], function() {
  gulp.watch('source-folder/*.haml', ['html-include']);
  gulp.watch('result-folder/*.html', browserSync.reload);
});
gulp.task('default', ['watch']);

You can also try gulp-pug with a native function include. Pug - was called 'Jade' before.

Gulp Haml Include HTML as a partial

1 Answers