├── .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 |