Pre-render React components at compile time. E.g. SomePage.jsx -> some-page.html
npm install gulp-rendersh
$ npm install gulp-render --save-dev
`
How to Use
#### Example 1:
`javascript
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:
`javascript
var gulp = require('gulp');
var render = require('gulp-render');
gulp.task('default', function() {
return gulp.src('src/pages/*/.jsx')
.pipe(render({
template:
'' +
'<%=title%> ' +
'<%=body%>',
harmony: false,
data: {title: 'Page Title'}
}))
.pipe(gulp.dest('build'));
});
`
#### React Component Sample (src/pages/SomePage.jsx)
`javascript
var React = require('react');
var DefaultLayout = require('../layouts/DefaultLayout.jsx');
var SomePage = React.createClass({
statics: {
layout: DefaultLayout
},
render() {
return (
React Component Sample
Lorem ipsum dolor sit amet.
);
}
});
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`