Gulp-art-include 基于腾讯 artTemplate 的 gulp 前端模版插件

Gulp-art-include 基于腾讯 artTemplate 的 gulp 前端模版插件，功能类似于 gulp-file-include 插件

JavaScript 模板引擎

访问GitHub主页

共12Star

详细介绍

NPM version Build status License

gulp-art-include

A gulp plugin for artTemplate.

Install

$ npm install gulp-art-include

Basic Usage

Template file:

<!-- demo.html -->
<div>{{foo}}</div>

Gulpfile:

var template  = require('gulp-art-include');
var gulp = require('gulp');

gulp.task('default', function () {
	gulp.src("demo.html")
		.pipe(template({
			data : {
				"foo" : "bar"
			}
		}))
		.pipe(gulp.dest('dist'));
});

Output:

<!-- demo.html -->
<div>bar</div>

@@include Expression

Template files:

<!-- main.html -->
<h1>Hello Fruits</h1>
@@include('fruits.html', {
	"message" : "Which fruit do you like?",
	"fruits" : [
		"Apple",
		"Banana",
		"Cherry"
	]
})
<!-- fruits.html -->
<p>{{message}}</p>
<ul>
	{{each fruits as fruit}}
	<li>{{fruit}}</li>
	{{/each}}
</ul>

Gulpfile:

var template  = require('gulp-art-include');
var gulp = require('gulp');

gulp.task('default', function () {
	gulp.src("main.html")
		.pipe(template())
		.pipe(gulp.dest('dist'));
});

Output:

<!-- main.html -->
<h1>Hello Fruits</h1>
<!-- fruits.html -->
<p>Which fruit do you like?</p>
<ul>
	<li>Apple</li>
	<li>Banana</li>
	<li>Cherry</li>
</ul>

@@escape Expression

Template files:

<!-- main.html -->
@@include('template.html', {
	"message" : "Hello!",
})
<!-- template.html -->
<script id="unescaped" type="text/html">
	<h1>{{message}}</h1>
</script>

@@escape([
<script id="escaped" type="text/html">
	<h1>{{message}}</h1>
</script>
])

Gulpfile:

var template  = require('gulp-art-include');
var gulp = require('gulp');

gulp.task('default', function () {
	gulp.src("main.html")
		.pipe(template())
		.pipe(gulp.dest('dist'));
});

Output:

<!-- main.html -->
<!-- template.html -->
<script type="text/html">
	<h1>Hello!</h1>
</script>

<script type="text/html">
	<h1>{{message}}</h1>
</script>

License

MIT

推荐源码