brainpoint/gulp-handlebars-precompile

gulp插件-提取html文件引入的handerbars模板文件预编译到指定目录

gulp-handlebars-precompile

提取html文件中的handerbars模板文件，预编译到指定目录，并且可以在html文件中建立script标签

Installation

npm install gulp -g
npm install gulp-handlebars-precompile --save-dev

Usage

基本用法

文件目录结构如下：

├── gulpfile.js              # gulpfile文件
├── src/                     # 源文件目录
	└── index.html        	 # index.html
    └── tpl/           		 # 模板目录
        └── product.hbs  		 # 模板文件
└── dev/                     # 编译目录

html文件，代码如下

	<!--hbs "src/tpl/product.hbs"-->

在根目录创建gulpfile.js，代码如下

var gulp = require('gulp');
var precompile = require('gulp-handlebars-precompile');

gulp.task('dev_tpl', function(){
    return gulp.src('src/*.html')
       .pipe(precompile({
              reg: /<!\-\-hbs\s+"([^"]+)"\-\->/g,
              dest: "dev/tpl/"
        }))
       .pipe(gulp.dest('dev/'))
});

执行

	gulp dev_tpl

task结束后会在dev/tpl/建立以html文件名建立的文件夹，里面有预编译的js文件,即：

└── dev/                     # 编译目录
	└── tpl/
		└── index/
			└── product.js
	└── index.html        	 # index.html

其他用法：

设置baseSrc

通过设置baseSrc,设置模板的根目录

html文件：

	<!--hbs "product.hbs"-->

gulpfile文件:

var gulp = require('gulp');
var precompile = require('gulp-handlebars-precompile');

gulp.task('dev_tpl', function(){
    return gulp.src('src/*.html')
       .pipe(precompile({
              reg: /<!\-\-hbs\s+"([^"]+)"\-\->/g,
              baseSrc: "src/tpl/",
              dest: "dev/tpl/"
        }))
       .pipe(gulp.dest('dev/'))
});

效果与基本用法的效果相同

在html文件中建立script链接

设置scriptSrc, 会在html文件中自动建立script标签指向设置的地址

html文件：

	<!--hbs "product.hbs"-->

gulpfile文件:

var gulp = require('gulp');
var precompile = require('gulp-handlebars-precompile');

gulp.task('dev_tpl', function(){
    return gulp.src('src/*.html')
       .pipe(precompile({
              reg: /<!\-\-hbs\s+"([^"]+)"\-\->/g,
              baseSrc: "src/tpl/",
              dest: "dev/tpl/",
              scriptSrc: 'tpl/'
        }))
       .pipe(gulp.dest('dev/'))
});

执行

	gulp dev_tpl

在dev/index.html中

原来的

	<!--hbs "product.hbs"-->

会被替换为

	<script src="tpl/index/product.js"></script>

配合gulp-inline-source实现js内联效果

html文件：

	<!--hbs "product.hbs"-->

gulpfile文件:

var gulp = require('gulp');
var precompile = require('gulp-handlebars-precompile');

gulp.task('dev_tpl', function(){
    return gulp.src('src/*.html')
       .pipe(precompile({
              reg: /<!\-\-hbs\s+"([^"]+)"\-\->/g,
              baseSrc: "src/tpl/",
              dest: "dev/tpl/",
              scriptSrc: 'tpl/',
              inline: true
        }))
       .pipe(gulp.dest('dev/'))
});

执行

	gulp dev_tpl

在dev/index.html中

原来的

	<!--hbs "product.hbs"-->

会被替换为

	<script src="tpl/index/product.js" inline></script>

然后可以用gulp-inline-source实现内联效果

设置命名空间

默认的命名空间为template，设置namespace修改命名空间

html文件：

	<!--hbs "product.hbs"-->

gulpfile文件:

var gulp = require('gulp');
var precompile = require('gulp-handlebars-precompile');

gulp.task('dev_tpl', function(){
    return gulp.src('src/*.html')
       .pipe(precompile({
              reg: /<!\-\-hbs\s+"([^"]+)"\-\->/g,
              baseSrc: "src/tpl/",
              dest: "dev/tpl/",
              scriptSrc: 'tpl/',
              inline: true,
              namespace: 'kevin'
        }))
       .pipe(gulp.dest('dev/'))
});

tpl.hbs文件为：

{{#each data}}
	<li href="{{itemLink}}">
	    {{test}}
	</li>
{{/each}}

会被编译为：

this["kevin"] = this["kevin"] || {};
this["kevin"]["product"] = Handlebars.template({"1":function(depth0,helpers,partials,data) {
    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;

  return "<li href=\""
    + alias3(((helper = (helper = helpers.itemLink || (depth0 != null ? depth0.itemLink : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"itemLink","hash":{},"data":data}) : helper)))
    + "\">\n    "
    + alias3(((helper = (helper = helpers.test || (depth0 != null ? depth0.test : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"test","hash":{},"data":data}) : helper)))
    + "\n</li>\n";
},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var stack1;

  return ((stack1 = helpers.each.call(depth0,(depth0 != null ? depth0.data : depth0),{"name":"each","hash":{},"fn":this.program(1, data, 0),"inverse":this.noop,"data":data})) != null ? stack1 : "");
},"useData":true});

如何使用预编译的模板

js中使用预编译的模板

var html = kevin.product(data);