Package Exports
- gulp-marko-axu
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-axu) 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-axu
Render marko template
marko website is http://markojs.com/
##Install
npm install gulp-marko-axu --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_axu = require('gulp-marko-axu');
gulp.task('default', function () {
return gulp.src('/src/*.html')
.pipe(marko_axu({name: 'Thomas', colors: ["red", "green", "blue"]}))
.pipe(gulp.dest('dist'));
});You can alternatively use set option
var gulp = require('gulp');
var marko_axu = require('gulp-marko-axu');
gulp.task('default', function () {
return gulp.src('src/*.html')
.pipe(marko_axu(
{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_axu = require('gulp-marko-axu');
var changed = require('gulp-changed');
gulp.task('default', function () {
gulp.src(PATHS.ax5core.doc_src + '/**/*.html')
.pipe(changed(PATHS.ax5core.doc_dest))
.pipe(marko_axu({
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_axu(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