使用 Gulp 把手部分编译为单个 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

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

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

故宫页的示例代码演示了这一点，虽然你的情况，你将不需要的partials选项，你可能想设置ignorePartials为false，以便它拿起你有文件可以在您的谐音目录