React Component Tools

This package provides common gulp tasks for building react components with:

• Webpack for transforming ES2015+/JSX and creating distribution builds
• BrowserSync for automatic, efficient rebundling on file changes
• Connect for serving examples during development, with live-reload integration
• SASS stylesheets for examples
• Publishing examples to Github Pages
• Publishing packages to npm and bower

You control the settings for the tasks by providing a config object, as described below.

Project setup

The tasks assume you are following the following conventions for your project:

• Package source has a single entry point in a source folder./
• The package will be published to both npm and bower
• A transpiled version will be published to a lib folder (for Node.js, Browserify and Webpack)
• A standalone package will be published to a dist folder (for Bower)
• Examples consist of
  • Static file(s) (e.g. html, images, etc)
  • One or more stylesheets to be generated with SASS
  • One or more scripts to be bundled with Webpack
• Examples will be packaged into an examples dist folder, and published to github pages

Example project structure

bower.json
package.json
gulpfile.js
src
	MyComponent.js
sass
	my-component.scss
lib
	// contains transpiled source
	MyComponent.js
dist
	// contains packaged component
    my-component.js
    my-component.min.js
    my-component.css
example
	dist
		// contains built examples
	src
		app.js
		app.scss
		index.html

Usage

npm install --save-dev gulp react-component-tools

In your gulpfile, call this package with your gulp instance and config. It will add the tasks to gulp for you. You can also add your own tasks if you want.

var gulp = require('gulp'),
	initGulpTasks = require('react-component-tools'),
	taskConfig = require('./config');

initGulpTasks(gulp, taskConfig);

Task Config

You can customise the tasks to match your project structure by changing the config.