使用Gulp handlebars将部分参数编译为单个HTML文件

Question

我想创建一个gulpfile来编译成一个单独的HTML文件。这是我的文件结构：

| css/
| - main.css
| gulpfile.js
| less/
| - main.less
| index.html
| templates/
| - index.handlebars
| - partials /
| -- header.hbs
| -- footer.hbs

我的gulpfile.js看起来像这样：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var hbsAll = require('gulp-handlebars-all');
var handlebars = require('handlebars');
var gulpHandlebars = require('gulp-compile-handlebars')(handlebars); //default to require('handlebars') if not provided 
var rename = require('gulp-rename');
var less = require('gulp-less-sourcemap');
var autoprefixer = require('gulp-autoprefixer');
var watch = require('gulp-watch');


handlebars.registerPartial('header', '{{header}}'),
handlebars.registerPartial('footer', '{{footer}}')


gulp.task('default', function () {

    options = {
        partialsDirectory : ['./templates/partials']
    }

    return gulp.src('templates/index.handlebars')
        .pipe(gulpHandlebars( options))
        .pipe(rename('index.html'))
        .pipe(gulp.dest(''));
});

gulp.task('hbsToHTML', function() {
   gulp.src('templates/*.hbs')
  .pipe(hbsAll('html', {
    context: {foo: 'bar'},

    partials: ['templates/partials/*.hbs'],

  }))
  .pipe(gulp.dest('templates'));
});

gulp.task('less', function () {
  gulp.src('./less/*.less')
    .pipe(less({
        sourceMap: {
            sourceMapRootpath: '../less' // Optional absolute or relative path to your LESS files
        }
    }))
    .pipe(gulp.dest('./css'));
});

gulp.task('prefix', function () {
  return gulp.src('css/main.css')
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulp.dest('./css'));
});

gulp.task('default', ['hbsToHTML', 'less', 'prefix']);

我的index.handlebars文件看起来像这样：

{{> header}}
<p>Hello </p>
<p>there </p>
{{> footer}}

所以，其他一切看起来都很好，但是我不能让hbsToHTML函数工作。欢迎任何帮助！我知道可能会有很多错误：

Answer 1

有一个很棒的吞咽插件就可以做到这一点。你可以在npm上找到它：https://www.npmjs.com/package/gulp-compile-handlebars

使用batch选项设置分部的路径。使用gulp.src设置模板的路径，并使用gulp.dest设置目标

npm页面上的示例代码演示了这一点，尽管在您的示例中不需要partials选项，并且您可能希望将ignorePartials设置为false，以便它拾取部分目录中的所有文件

Answer 2

顺便说一句，我把它弄清楚了，并上传到了git。检查一下。

https://github.com/nikdelig/hbsToHTML

       gulp.task('hbsToHTML', function() {
       gulp.src('templates/*.hbs')
      .pipe(hbsAll('html', {
       context: {foo: 'bar'},

     partials: ['templates/partials/**/*.hbs'],}))
      .pipe(rename('index.html'))
      .pipe(htmlmin({collapseWhitespace: true}))
      .pipe(gulp.dest(''));
     });