title: Gulp with browserify, tsify, and reactify?
body: <p>I'm using <code>gulp</code> with <code>browserify</code> and <code>tsify</code> in a TypeScript project. The following is an extract from my <code>gulpfile.js</code>:</p>
  
  <pre><code>var browserified = function (filename, debug) {
    var b = browserify({
      entries: filename,
      debug: debug || false
    });
    b.plugin('tsify', {
      noImplicitAny: true,
      target: 'ES5'
    });
    b.transform('debowerify');
    return b.bundle();
  };
  
  gulp.task('rebuild', ['lint', 'less'], function() {
      var b = browserified ('./src/ts/main.ts', true);
      return buildSourceMaps (b);
  });
  </code></pre>
  
  <p>This works so far. I want to extend this so I can <code>require</code> React JSX files. First I tried (from one of my TypeScript files):</p>
  
  <pre><code>import Test = require ('../jsx/Test.jsx');
  </code></pre>
  
  <p>This doesn't work, though, because <code>tsify</code> would complain as it looks for a TypeScript file <code>../jsx/Test.jsx.ts</code>. So I use the following hack:</p>
  
  <pre><code>declare var require: any;
  var Test = require ('../jsx/Test.jsx');
  </code></pre>
  
  <p>If <code>Test.jsx</code> is plain vanilla JavaScript, this works. If <code>Test.jsx</code> contains TypeScript, it would fail, which is what I expect. So far, so clear.</p>
  
  <p>Now I want to add <code>reactify</code> to my gulp tasks so I can use JSX in these files. <em>Here I am stuck!</em> I tried adding the following to the function <code>browserified</code> in my <code>gulpfile.js</code>:</p>
  
  <pre><code>b.plugin ('reactify', {
      extension: 'jsx'
  });
  </code></pre>
  
  <p>I still get the following error when I call <code>gulp rebuild</code> when <code>Test.jsx</code> contains actual JSX:</p>
  
  <pre><code>Unexpected token &lt;
  </code></pre>
  
  <p>Obviously, gulp chokes on the first JSX-specific term. I think gulp is trying to pass the JSX through the TypeScript compiler. Which isn't a surprise, since I can't think of a way how to tell <code>tsify</code> to ignore my .jsx files. I'm new to <code>gulp</code>, so I am a bit at a loss. Any ideas how to set up <code>gulp</code> to allow for TypeScript with all <strong><em>.ts</em></strong> files and JSX with all <strong><em>.jsx</em></strong> files?</p>