gulp-render
![Gitter](https://camo.githubusercontent.com/c5630211cdc25234693adac812086e2ecdc3343cf2a6de9f6750c4657d3c79cd/687474703a2f2f696d672e736869656c64732e696f2f62616467652f636861742d6f6e6c696e652d627269676874677265656e2e7376673f7374796c653d666c6174)
Pre-render React components at compile time.
$ npm install gulp-render --save-dev
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'));
});
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'));
});
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;
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 |
React.js Starter Kit - a skeleton for an isomorphic web application (SPA)
The MIT License (MIT) @ Konstantin Tarkus (@koistya)