├── .gitignore
├── Gulpfile.js
├── README.md
├── package.json
└── src
    ├── __tests__
        └── app-test.js
    └── app.jsx


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | dist/


--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
 1 | require('harmonize')();
 2 | 
 3 | var gulp = require('gulp');
 4 | var browserify = require('browserify');
 5 | var babelify = require('babelify');
 6 | var source = require('vinyl-source-stream');
 7 | var jest = require('gulp-jest');
 8 | var chalk = require('chalk');
 9 | 
10 | gulp.task('compile', function(){
11 |   browserify('./src/app.jsx')
12 |     .transform(babelify)
13 |     .bundle()
14 |     .on('error', function(err){
15 |       console.log(chalk.bold.red(err));
16 |     })
17 |     .pipe(source('main.js'))
18 |     .pipe(gulp.dest('./dist/javascript'));
19 | });
20 | 
21 | gulp.task('jest', function(){
22 |   gulp.src('src/**/*-test.js')
23 |     .pipe(jest({
24 |       rootDir : 'src',
25 |       scriptPreprocessor : "../node_modules/babel-jest",
26 |       testFileExtensions : ["es6", "js"],
27 |       moduleFileExtensions : ["js", "json", "es6"],
28 |       unmockedModulePathPatterns : ["./node_modules/react"]
29 |     }));
30 | });
31 | 
32 | gulp.task('watch', function(){
33 |   gulp.watch(['src/**/*.js*'], ['compile']);
34 | });
35 | 
36 | gulp.task('default', ['watch']);
37 | 
38 | gulp.task('test', ['jest']);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-es6-gulp-playground
 2 | 
 3 | I wanted a place to play around with [React](facebook.github.io/react/) and ES6 (aka the new version of Javascript). Despite the wealth of information on the internet about either of those topics, I couldn't find a consensus on the best way to put them together. Here I've put together a build process that uses [gulp](gulpjs.com) and [browserify](browserify.org) (ES6 module loading "shim")
 4 | 
 5 | ## Setup
 6 | Note: Having `node` installed is a prerequisite.
 7 | 
 8 | 1. `npm install -g gulp`.
 9 | 2. `npm install`.
10 | 
11 | ## Dev
12 | 
13 | 1. To watch and re-compile on change, run `gulp`.
14 | 
15 | 2. To compile, run `gulp compile`.
16 |   - Compiled js is in dist/javascript.
17 |   - The default entry file is src/app.jsx.
18 | 
19 | 
20 | ## Test
21 | 
22 | Includes support for [Jest](https://facebook.github.io/jest/docs/tutorial-react.html#content) with ES6.
23 | 
24 | 1. To run tests, run `gulp test`.
25 |   - Looks for files ending in `-test.js` inside `src/`.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-es6-gulp-playground",
 3 |   "version": "1.0.0",
 4 |   "description": "Playground for React, ES6 and gulp",
 5 |   "repository": "https://www.github.com/imcnally/react-es6-gulp-playground",
 6 |   "main": "Gulpfile.js",
 7 |   "scripts": {
 8 |     "test": "gulp test"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "bl": "^0.9.4",
14 |     "browserify": "^8.1.3",
15 |     "gulp": "^3.8.11",
16 |     "react": "^0.12.2",
17 |     "through2": "^0.6.3",
18 |     "vinyl": "^0.4.6",
19 |     "vinyl-source-stream": "^1.0.0"
20 |   },
21 |   "devDependencies": {
22 |     "babel-jest": "^4.0.0",
23 |     "babelify": "^5.0.3",
24 |     "chalk": "^1.0.0",
25 |     "gulp-jest": "^0.4.0",
26 |     "harmonize": "^1.4.1",
27 |     "react-tools": "^0.12.2"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/__tests__/app-test.js:
--------------------------------------------------------------------------------
 1 | import {addons} from 'react/addons';
 2 | var TestUtils = addons.TestUtils;
 3 | 
 4 | jest.dontMock('../app.jsx');
 5 | 
 6 | describe('App', () => {
 7 | 
 8 |   it('runs', () => {
 9 |     expect(2).toEqual(2);
10 |   });
11 | 
12 | });


--------------------------------------------------------------------------------
/src/app.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | var app = React.createClass({
 4 |   render (){
 5 |     return (
 6 |       <h1>Sup</h1>
 7 |     )
 8 |   }
 9 | });
10 | 
11 | export default app;
12 | 


--------------------------------------------------------------------------------