gulp-render
v0.2.2
Published
Pre-render React components at compile time. E.g. SomePage.jsx -> some-page.html
Downloads
47
Maintainers
koistyaReadme
gulp-render 
Pre-render React components at compile time.
How to Install
$ npm install gulp-render --save-devHow to Use
Example 1:
var gulp = require('gulp');
var render = require('gulp-render');
gulp.task('default', function() {
return gulp.src('src/pages/**/*.jsx')
.pipe(render({template: 'src/pages/_template.html'}))
.pipe(gulp.dest('build'));
});Example 2:
var gulp = require('gulp');
var render = require('gulp-render');
gulp.task('default', function() {
return gulp.src('src/pages/**/*.jsx')
.pipe(render({
template:
'<!doctype html>' +
'<html><head><title><%=title%></title></head>' +
'<body><%=body%></body></html>',
harmony: false,
data: {title: 'Page Title'}
}))
.pipe(gulp.dest('build'));
});React Component Sample (src/pages/SomePage.jsx)
var React = require('react');
var DefaultLayout = require('../layouts/DefaultLayout.jsx');
var SomePage = React.createClass({
statics: {
layout: DefaultLayout
},
render() {
return (
<div className="container">
<h1>React Component Sample</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
);
}
});
module.exports = SomePage;API
render(options)
option | values | default
---------------|------------------------------------------------------------------------|--------
template | Lo-Dash template string or filename | null
harmony | true: enable ES6 features | true
stripTypes | true: enable Flow type annotations | true
hyphenate | true: SomePage.jsx -> some-page.html | true
staticMarkup | true: HTML output will not have data-react-* attributes | false
data | E.g. {title: 'Hello'} or function(file) { ... } | object or function
Related Projects
React.js Starter Kit - a skeleton for an isomorphic web application (SPA)
License
The MIT License (MIT) @ Konstantin Tarkus (@koistya)