Further Tooling Improvements

.gitignore

@@ -1,4 +1,5 @@
 *.map
+build
 coverage
 node_modules
 bower_components

.travis.yml

@@ -1,7 +1,12 @@
 sudo: false
 language: node_js
 node_js:
-  - "0.10"
+  - 0.10
+env:
+  - TEST=1
+  - TYPECHECK=1
+  - LINT=1
+
 script:
-  - npm run verify
+  - ./config/travis/test.sh
 after_success: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

Gulpfile.js

@@ -1,50 +1,46 @@
-var gulp = require('gulp'),
-  given = require('gulp-if'),
-  jsx = require('gulp-react'),
-  reactify = require('reactify'),
-  buffer = require('vinyl-buffer'),
-  minifyjs = require('gulp-uglify'),
-  browserify = require('browserify'),
-  sourcemaps = require('gulp-sourcemaps'),
-  sourcestream = require('vinyl-source-stream');
+var gulp = require('gulp');
+var babel = require('gulp-babel');
+
+var browserifyCreator = require('./pipeline/browserify');
 
 var args = require('yargs').alias('P', 'production')
                .alias('D', 'development')
-               .alias('E', 'example').argv,
-  production = args.production,
-  development = args.development,
-  example = args.example;
-
-gulp.task('build', function() {
-  // Build standalone bundle for the browser
-  var b = browserify({
-        entries: './src/react-infinite.jsx',
-        standalone: 'Infinite'
-      })
-      .transform(reactify, {
-        es6: true
-      })
-     .exclude('react')
-     .bundle()
-     .pipe(sourcestream('react-infinite.' + (production ? 'min.' : '') + 'js'))
-     .pipe(buffer())
-     .pipe(given(development, sourcemaps.init()))
-     .pipe(given(production, minifyjs()))
-     .pipe(given(development, sourcemaps.write('.')))
-     .pipe(gulp.dest('dist'));
+               .alias('E', 'example').argv;
+
+var envObject = {
+  production: args.production,
+  development: args.development,
+  release: !(args.production || args.development)
+};
+var INFINITE_SOURCE = './src/react-infinite.jsx';
 
+gulp.task('build-bundle', browserifyCreator(false, envObject, INFINITE_SOURCE));
+gulp.task('watch-develop-bundle', browserifyCreator(true, {development: true}, INFINITE_SOURCE));
+
+// This task builds everything for release: the dist
+// folder is populated with react-infinite.js and
+// react-infinite.min.js, while the build folder is
+// provided with a copy of the source transpiled to ES5.
+gulp.task('release', ['build-bundle'], function() {
   // Transpile CommonJS files to ES5 with React's tools.
   gulp.src(['./src/**/*.js', './src/**/*.jsx'])
-      .pipe(jsx({
-        harmony: true
-      }))
-      .pipe(gulp.dest('build'))
-
-  if (example) {
-    gulp.src('./examples/*.jsx')
-      .pipe(jsx())
-      .pipe(gulp.dest('examples'))
-  }
+      .pipe(babel())
+      .pipe(gulp.dest('build'));
+});
+
+// This task is used to build the examples. It is used
+// in the development watch function as well.
+gulp.task('examples', function() {
+  gulp.src('./examples/*.jsx')
+    .pipe(babel())
+    .pipe(gulp.dest('examples'));
+});
+
+// This task is used for development. When run, it sets up
+// a watch on the source files
+gulp.task('develop', ['watch-develop-bundle'], function() {
+  gulp.watch('Gulpfile.js', ['examples', 'build-bundle']);
+  gulp.watch('./examples/*.jsx', ['examples', 'build-bundle']);
 });
 
-gulp.task('default', ['build']);
+gulp.task('default', ['release']);

README.md

@@ -177,7 +177,11 @@ I am seated in an office, surrounded by heads and bodies. There I've written som
 Tests are located in the `__tests__` directory<small><sup>2</sup></small>, and can be run with `npm test` after `npm install`.
 
 ## Developing
-React Infinite is built with Browserify and Gulp. To get started, install the development dependencies with `npm install`. If you do not already have Gulp, you might wish to install it globally with `npm install -g gulp`. Then run `gulp build -D`, which builds the development version. To build the production version, run `gulp build -P`, and to build the non-minified release version, run `gulp`.
+React Infinite is built with Browserify and Gulp. To get started, install the development dependencies with `npm install`. If you do not already have Gulp, you might wish to install it globally with `npm install -g gulp`.
+
+The newly revamped development environment is based on `gulp develop`. When run, this command sets up a watch on the `/src` folder with Browserify as well as the `examples` folder.
+
+The other major command, `gulp release`, prepares files for release. It produces normal and minified versions of `react-infinite.js` in the `dist` folder and also directly transpiles the source to ES5 in the `build` folder so it can be required by other asset pipelines.
 
 ### Infinite Computers