Gulp Browserify + Reactify (JSX)

[rapind]

Would be incredibly useful to see an extension of your browserify vanilla example that included a JSX transform (reactify).

Something along the lines of this gulp-browserify based sample:

gulp.task('javascripts', function() {
  gulp.src('src/javascripts/app.jsx')
    .pipe(browserify({
      insertGlobals: true,
      transform: ['reactify'],
      extensions: ['.jsx']
    }))
    .pipe(gulp.dest('build/javascripts'));
});

[sogko]

Hi @rapind, thanks for the suggestion.

I was trying to put forth a generic example with the hopes that it would be easy to translate existing gulp-browserify recipes to a vanilla recipe.

I had previously touched briefly on using reactify transform in the README.md here. But I guess that gets buried in all of that words.

I guess I could write a separate browserify recipe for reactify. I would like to gather more use-cases for a typical browserify + reactify builds before that. Could you share your typical build?

In the mean time, here's a quick one thats equivalent to the one you posted:

var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');
var rename = require('gulp-rename');

gulp.task('browserify', function () {

  var browserified = transform(function(filename) {
    var b = browserify(filename, {
      insertGlobals: true,
      extensions: ['.jsx']
    });
    b.transform(reactify);
    return b.bundle();
  });

  return gulp.src('./src/javascripts/app.jsx')
    .pipe(browserified)
    .pipe(rename('app.js') // rename it or else the result file would be `app.jsx`
    .pipe(gulp.dest('./build/javascripts'));
});

[SiZapPaaiGwat]

you may find solution in this repo https://github.com/Granze/react-starterify.