Gulpのハンドルバーを使用して部分的に1つのHTMLファイルにコンパイル

Question

部分ファイルから単一のHTMLファイルにコンパイルするgulpfileを作成したいとします。これは私のファイル構造である：

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

私gulpfile.jsは、次のようになります。だから、

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

、他のeverthingはルックス：

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ファイルは次のようになります私はhbsToHTML関数を動作させることはできません。どんな助けも歓迎です！私はいくつかのバグを超えるがある可能性が知っている:(

Answer 1

まさにこれを行い、優れ一気プラグインがありますあなたがここにNPMにそれを見つけることができます。https://www.npmjs.com/package/gulp-compile-handlebars

batchオプションを使用してパーシャルへのパスを設定します。 はgulp.src を使用して、テンプレートへのパスを設定し、gulp.dest

あなたのケースでは、あなたがpartialsオプションを必要としない、あなたはignorePartialsに設定したいかもしれませんが、NPMページ上のサンプルコードは、これを示しを使用して目的地を設定します偽だからあなたのパーシャルディレクトリにあるすべてのファイルを取得します。

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('')); 
    });