0.2.2 • Published 9 years ago
gulp-render v0.2.2
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)