gulp-marko-axu

Render marko template

marko website is http://markojs.com/

Install

npm install gulp-marko-axu --save-dev

Usage

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 todata.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

marko compile options.

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