gulp-render's Introduction

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`