使用 Gulp 车把部分编译为单个 HTML 文件答案

【问题标题】：Compile using Gulp handlebars partials to single HTML file使用 Gulp 车把部分编译为单个 HTML 文件
【发布时间】：2016-05-11 10:11:12
【问题描述】：

我想创建一个 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 函数工作。欢迎任何帮助！我知道可能有很多错误:(

【问题讨论】：

标签： javascript html gulp handlebars.js

【解决方案1】：

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

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

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

【讨论】：

我找到了答案，但你的方式也可以实现。感谢您的宝贵时间！

【解决方案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(''));
     });

【讨论】：