gulp-riot-tsref

A gulp plugin for riot with TypeScript reference support. This is a fork of the gulp-riot module (Much appreciate to jigsaw).

Install

With npm do:

$ npm install --save-dev gulp-riot-tsref

Usage

This plugin compile riot's .tag files. This plugin also extract a script block from .tag files.

Example

Mode extract

example.tag:

<example>
  <p>This is { sample }</p>

  <script>
    /// <reference path="hoge.d.ts" />
    this.sample = new Hoge.Fuga().getMessage();
  </script>
</example>

gulpfile.js:

var gulp = require('gulp');
var riot = require('gulp-riot-tsref');

gulp.task('riot:extract', function() {
  return gulp.src('example.tag')
             .pipe(riot({"mode": "extract"}))
             .pipe(gulp.dest('dest'));
});

Run task:

% gulp riot:extract
% cat example.ts
/// <reference path="hoge.d.ts" />
this.sample = new Hoge.Fuga().getMessage();

Mode compile

example.tag:

<example>
  <p>This is { sample }</p>

  <script>
    /// <reference path="hoge.d.ts" />
    this.sample = new Hoge.Fuga().getMessage();
  </script>
</example>

hoge.d.ts

declare module Hoge {
    class Fuga {
        getMessage(): string;
    }
}

gulpfile.js:

var gulp = require('gulp');
var riot = require('gulp-riot-tsref');

gulp.task('riot:compile', function() {
  return gulp.src('example.tag')
             .pipe(riot())
             .pipe(gulp.dest('dest'));
});

Run task:

% gulp riot:compile
% cat example.js
riot.tag('example', '<p>This is { sample }</p>', function(opts) {
  this.sample = new Hoge.Fuga().getMessage();
})

Compile options

This plugin can give riot's compile options.

  gulp.src('example.tag')
      .pipe(riot({
        compact: true // <- this
      }))
      .pipe(gulp.dest('dest'));

Available option

• mode: String, compile(default) | extract
• precompiled: String, path of directory of precompiled script
• compact: Boolean
  • Minify </p> <p> to </p><p>
• whitespace: Boolean
  • Escape \n to \\n
• expr: Boolean
  • Run expressions through parser defined with --type
• type: String, coffeescript | typescript | cs | es6 | livescript | none
  • JavaScript parser
• template: String, jade
  • Template parser
  • See more: https://muut.com/riotjs/compiler.html
• modular: Boolean
  • For AMD and CommonJS option
  • See more: http://riotjs.com/guide/compiler/#pre-compilation
• parsers: Object
  • Define custom parsers
  • css: Function
    • See more: http://riotjs.com/api/compiler/#css-parser
  • js: Function
    • See more: http://riotjs.com/api/compiler/#js-parser
  • html: Function
    • See more: http://riotjs.com/api/compiler/#html-parser

Building

In order to build the gulp-riot-tsref, ensure that you have git and node.js installed.

Clone a copy of the repository:

$ git clone git@github.com:CODEYA/gulp-riot-tsref.git

Change to the gulp-riot-tsref directory:

$ cd gulp-riot-tsref

Install dev dependencies:

$ npm install

Build the gulp-riot-tsref:

$ npm run build

Test the gulp-riot-tsref:

$ npm test