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
extract
Mode 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();
compile
Mode 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>
- Minify
- whitespace:
Boolean
- Escape
\n
to\\n
- Escape
- expr:
Boolean
- Run expressions through parser defined with
--type
- Run expressions through parser defined with
- 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
- js:
Function
- html:
Function
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