Package Exports
- gulp-marko-ax5
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gulp-marko-ax5) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
gulp-marko-ax5
Render marko template
marko website is http://markojs.com/
##Install
npm install gulp-marko-ax5 --save-devUsage
src/greeting.html
Hello ${data.name}!
<ul if="notEmpty(data.colors)">
<li style="color: $color" for="color in data.colors">
$color
</li>
</ul>
<div else>
No colors!
</div>gulpfile.js
var gulp = require('gulp');
var marko_ax5 = require('gulp-marko-ax5');
gulp.task('default', function () {
return gulp.src('/src/*.html')
.pipe(marko_ax5({name: 'Thomas', colors: ["red", "green", "blue"]}))
.pipe(gulp.dest('dist'));
});You can alternatively use set option
var gulp = require('gulp');
var marko_ax5 = require('gulp-marko-ax5');
gulp.task('default', function () {
return gulp.src('src/*.html')
.pipe(marko_ax5(
{name: 'Thomas', colors: ["red", "green", "blue"]},
{
options: { // is marko compile option
preserveWhitespace: true, // default false
allowSelfClosing: {},
checkUpToDate: true,
writeToDisk: true // default false
},
flatten: {
src_root: 'src'
},
extension: 'html'
}
))
.pipe(gulp.dest('dist'));
});dist/greeting.html
Hello Thomas!
<ul>
<li style="color: red">red</li>
<li style="color: green">green</li>
<li style="color: blue">blue</li>
</ul>And you can use with gulp-changed
var gulp = require('gulp');
var marko_ax5 = require('gulp-marko-ax5');
var changed = require('gulp-changed');
gulp.task('default', function () {
gulp.src(PATHS.ax5core.doc_src + '/**/*.html')
.pipe(changed(PATHS.ax5core.doc_dest))
.pipe(marko_ax5({
projectName: "ax5core",
layoutPath: PATHS.assets.src + '/_layouts/index.marko'
}))
.pipe(gulp.dest(PATHS.ax5core.doc_dest));
});Use the tmpl-metadata tag attributes value to data.metadata
<tmpl-metadata
parentId="demo"
parentTitle="DEMO"
id="basic"
title="Picker"
desc=""
></tmpl-metadata>
<layout-use template="${data.layoutPath}">
<layout-put into="body">
페이지 테스트
${data.metadata.parentTitle}
</layout-put>
</layout-use>API
marko_ax5(data, [options])
Render a template using the provided data.
data
Type: Object
The data object used to populate the text.
options
options
Type: Object
flatten
Type: Object
It will ignore the folder structure. It treats it as if it is located the file just below the "src_root".
extension
Type: String
It is used when you are trying to change the file extension.
Notes
If you use grunt instead of gulp, but want to perform a similar task, use grunt-ax-marko.
License
MIT © Thomas Jang