gulp-marko v0.1.0

gulp-marko

Gulp plugin to compile Marko templates to html. It also supports the optimizer taglib and writes resources into a static directory.

Usage

First, install gulp-marko as a dependency:

npm install --save gulp-marko

Then, add it to your gulpfile.js:

var marko = require('gulp-marko');

gulp.task('marko', function(){
  gulp.src(['src/*.marko'])
  .pipe(marko({
      renderParams: {
          title: 'Hello World'
      }
  }))
  .pipe(gulp.dest('build'));
});

You can also pass a specific Optimizer config:

gulp.src('src/*.marko')
    .pipe(marko({
        optimizer: {
            outputDir: 'build/static'
			plugins: [
				'optimizer-marko',
				'optimizer-less'
			],
			urlPrefix: './static',
			fingerprintsEnabled: false,
			bundlingEnabled: false
		}
    }))
    .pipe(gulp.dest('build'));

Run the following command to generate the html with css and js files inside static folder and references of those files are added into the html file:

gulp marko

This should generate the html file in build/

Use it for tests

It is very useful if you want to do some functional testing of components. This example uses mocha-phantomjs to render the html and run the tests. Please check their repo for an example file.

var gulp = require('gulp');
	mochaPhantomJS = require('gulp-mocha-phantomjs'),
	marko = require('gulp-marko'),
	clean = require('gulp-clean');

gulp.task('test', function () {
	return gulp
	.src('test/build', {read: false})
	.pipe(clean())
	.on('finish', function () {
		gulp.src('test/client/test.marko') // test file
		.pipe(marko({
			optimizer: {
				outputDir: 'test/build/static'
			}
		}))
		.pipe(gulp.dest('test/build'))
		.on('finish', function () {
			gulp.src('test/build/*.marko.html')
			.pipe(mochaPhantomJS());
		});
	});
});