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

Compile using Gulp handlebars partials to single HTML file

本文关键字：单个 HTML 文件 编译 Gulp 柄部 使用      更新时间：2023-09-26

我想创建一个gulpfile，将部分编译成一个HTML文件。这是我的文件结构：

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

我的gullfile.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.handlers文件看起来是这样的：

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

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

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

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

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

中的所有文件

我找到了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(''));
     });
相关文章：