• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

koistya/gulp-render: Pre-render React components at compile time. E.g. SomePage. ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

koistya/gulp-render

开源软件地址(OpenSource Url)：

https://github.com/koistya/gulp-render

开源编程语言(OpenSource Language)：

JavaScript 100.0%

开源软件介绍(OpenSource Introduction)：

gulp-render   Build Status Dependency Status Tips Gitter

Pre-render React components at compile time.

How to Install

NPM

$ 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)

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
jlouns/gulp-requirejs-optimize: Wrapper for the requirejs optimizer for use in g ...发布时间：2022-06-21
下一篇：
juanfran/gulp-multi-process: Run gulp tasks in separate CPU processes发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap