Question

我正在使用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>

Answer 1

使用gulp-haml不可能编译Ruby代码，如：

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

因为gulp-haml没有完整的Ruby引擎功能。如果你想使用Ruby，下载并安装，然后为它安装haml（但Ruby请求非常慢〜1-3s）。或者，使用其他一些templater，比如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']);

您还可以尝试使用原生函数include gulp-pug。 Pug - 被称为＆＃39; Jade＆＃39;之前。

Gulp Haml包含HTML作为部分内容

1 个答案: