使用Gulp把手partials編譯爲單個HTML文件

我想創建一個gulpfile來將partials編譯成單個HTML文件。這是我的文件結構：使用Gulp把手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函數工作。歡迎任何幫助！我知道有可能比一些錯誤:(

來源

2016-05-11 Nik Delig

有一個很好的大口的插件，正是這一點更可以在這裏找到它的NPM：https://www.npmjs.com/package/gulp-compile-handlebars

使用batch選項設置路徑到您的諧音。將路徑設置爲使用gulp.src 您的模板和設置使用gulp.dest

故宮頁的示例代碼演示了這個目標，但在你的情況下，你不需要partials選項，您可能需要設置ignorePartials到假如這樣的話它拿起你在你的部分目錄中的所有文件

來源

2016-09-16 16:46:40 rjbultitude

我有點找到了答案，但你的方式也可以實現。謝謝你的時間！ –

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

來源

2016-09-17 11:48:28

使用Gulp把手partials編譯爲單個HTML文件

回答

相關問題