title: How to build my gulp file?
body: <p>I am using reactjs and I want to use gulp to do the following</p>
  
  <ul>
  <li>convert all jsx,js files to one js file</li>
  <li>use browserify</li>
  <li>minify the js output file</li>
  <li>allow jquery to be required using require() function in jsx files</li>
  <li>watch for any changes to jsx and convert to js</li>
  </ul>
  
  <p>Here's what I have so far:</p>
  
  <pre><code>var gulp = require('gulp')
  var browserify = require('browserify')
  var source = require('vinyl-source-stream')
  var reactify = require('reactify')
  var rename = require('gulp-rename')
  
  gulp.task('js', function() {
      var b = browserify({
          entries: ['./lib/test.js', './lib/app.jsx'],
          transform: [reactify],
          extensions: ['.js','.jsx'],
          debug: false,
          cache: {},
          packageCache: {},
          fullPaths: false
      });
  
      function build(file) {
          return b
          .external('jquery')
          .plugin('minifyify', {
              map: false
          })
          .bundle()
          .pipe(source('main.js'))
          // Add .min.js to the end of each optimized file
          .pipe(gulp.dest('./js/'));
      };
      build();
  });
  gulp.task('watch', function() {
      gulp.watch("lib/*.jsx", ["js"])
  })
  gulp.task('default', ['js', 'watch']);
  </code></pre>
  
  <p>How can I accomplish the above tasks in my gulp file to make it production ready? </p>