Gulp with browser, tsify and reactivate?

Question

I use gulpwith browserifyand tsifyin a TypeScript project. The following is an excerpt from mine gulpfile.js:

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);
});

It still works. I want to expand this so that I can requireReact JSX files. First I tried (from one of my TypeScript files):

import Test = require ('../jsx/Test.jsx');

This does not work because it tsifywill complain because it is looking for a TypeScript file ../jsx/Test.jsx.ts. Therefore, I use the following hack:

declare var require: any;
var Test = require ('../jsx/Test.jsx');

If Test.jsx- plain vanilla JavaScript, this works. If it Test.jsxcontains TypeScript, it will fail, which is what I expect. So far so clear.

reactify gulp, JSX . ! browserified gulpfile.js:

b.plugin ('reactify', {
    extension: 'jsx'
});

, gulp rebuild, Test.jsx JSX:

Unexpected token <

, gulp JSX- . , gulp JSX TypeScript. , , tsify .jsx . gulp, . , gulp, TypeScript .ts JSX .jsx?

Answer 1

gulp, . watchify browserify reactify , , " ". path.ENTRY_POINT ( app.js main.js).

gulp.task('watch', function() {
   gulp.watch(path.HTML, ['copy']);

   var watcher  = watchify(browserify({
       entries: [path.ENTRY_POINT],
       transform: [reactify],
       debug: true,
       cache: {}, packageCache: {}, fullPaths: true
   }));

   return watcher.on('update', function () {
       watcher.bundle()
           .pipe(source(path.OUT))
           .pipe(gulp.dest(path.DEST_SRC))
       console.log('Updated');
   })
       .bundle()
       .pipe(source(path.OUT))
       .pipe(gulp.dest(path.DEST_SRC));
});

gulpfile.js gulp: http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/