Gulp with browserify, tsify, and reactify?
This is the gulp task I use for development. It uses watchify
along with browserify
and reactify
to build your code, provide source mapping, and rebundle any changes you make on the fly. The path.ENTRY_POINT
variable is the main component for your react app (often app.js
or 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));});
I used this tutorial to set up my gulpfile.js
and it provides a good explanation for every gulp task:http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/