gulp-render
gulp-render copied to clipboard
koistya
Pre-render React components at compile time. E.g. SomePage.jsx -> some-page.html
gulp-render 
Pre-render React components at compile time.
How to Install
$ npm install gulp-render --save-dev
How 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)
koistya