Question

我想创建一个gulpfile来从partials编译成单个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插件，正是这样做的。你可以在这里找到它：https://www.npmjs.com/package/gulp-compile-handlebars

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

设置目的地

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

Answer 2

我想通了btw并将其上传到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(''));
     });

使用Gulp把手部分编译为单个HTML文件

2 个答案: