Gulp Haml 包含 HTML 作为部分答案

【问题标题】：Gulp Haml Include HTML as a partialGulp Haml 包含 HTML 作为部分
【发布时间】：2017-04-22 04:24:41
【问题描述】：

我正在使用 gulp 使用 gulp-haml-coffee 渲染haml

我想做这样的事情：

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>

对我来说棘手的部分是它是 HTML 和 Haml 的混合体，我希望使用 Gulp 将它们自动组合到一个文件中。

这是当前的 Gulp 任务：

// 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
    }))
});

haml 转换正在工作，但我不知道如何在转换中包含纯 HTML 文件。

我将创建几个其他 haml 文件（关于、联系人等）

这就是我希望呈现的 HTML 的样子：

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>

【问题讨论】：

标签： gulp haml

【解决方案1】：

使用 gulp-haml 无法编译像这样的 Ruby 代码：

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

因为 gulp-haml 没有完整的 Ruby 引擎功能。如果您想使用 Ruby，请下载并安装，然后为它安装 haml（但 Ruby 请求非常慢~1-3s）。或者，使用其他一些模板，如 gulp-file-include，这样您就可以编译然后包含已编译的 .HTML 文件（我使用 gulp-jhaml，它与 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']);

您也可以尝试 gulp-pug 使用本机函数包含。 Pug - 之前被称为“翡翠”。

【讨论】：