Gulp-art-include 基于腾讯 artTemplate 的 gulp 前端模版插件
Gulp-art-include 基于腾讯 artTemplate 的 gulp 前端模版插件,功能类似于 gulp-file-include 插件
JavaScript 模板引擎
共12Star
详细介绍
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