jquery - How to build my gulp file? -

i using reactjs , want use gulp following

• convert jsx,js files 1 js file
• use browserify
• minify js output file
• allow jquery required using require() function in jsx files
• watch changes jsx , convert js

here's have far:

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 end of each optimized file         .pipe(gulp.dest('./js/'));     };     build(); }); gulp.task('watch', function() {     gulp.watch("lib/*.jsx", ["js"]) }) gulp.task('default', ['js', 'watch']); 

how can accomplish above tasks in gulp file make production ready?

i can't answer points, perhaps can started. how use browserify:

'use strict';  var babelify = require('babelify'); var browserify = require('browserify'); var browsersync = require('browser-sync'); var buffer = require('vinyl-buffer'); var config = require('../config'); var debowerify = require('debowerify'); var gulp = require('gulp'); var gulpif = require('gulp-if'); var gutil = require('gulp-util'); var handleerrors = require('../util/handleerrors'); var ngannotate = require('browserify-ngannotate'); var source = require('vinyl-source-stream'); var sourcemaps = require('gulp-sourcemaps'); var streamify = require('gulp-streamify'); var uglify = require('gulp-uglify'); var watchify = require('watchify');  // based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/ function buildscript(file) {      var bundler = browserify({         entries: config.browserify.entries,         debug: true,         cache: {},         packagecache: {},         fullpaths: true     }, watchify.args);      if (!global.isprod) {         bundler = watchify(bundler);         bundler.on('update', function() {             rebundle();         });     }      var transforms = [         babelify,         debowerify,         ngannotate,         'brfs',         'bulkify',         'browserify-shim'     ];      transforms.foreach(function(transform) {         bundler.transform(transform);     });      function rebundle() {         var stream = bundler.bundle();         var createsourcemap = global.isprod && config.browserify.sourcemap;          gutil.log('rebundle...');          return stream.on('error', handleerrors)             .pipe(source(file))             .pipe(gulpif(createsourcemap, buffer()))             .pipe(gulpif(createsourcemap, sourcemaps.init()))             .pipe(gulpif(global.isprod, streamify(uglify({                 compress: { drop_console: true }             }))))             .pipe(gulpif(createsourcemap, sourcemaps.write('./')))             .pipe(gulp.dest(config.scripts.dest))             .pipe(gulpif(browsersync.active, browsersync.reload({ stream: true, once: true })));     }      return rebundle(); }  gulp.task('browserify', function() {     return buildscript('main.js'); }); 

regarding watching changes, scripts automatically watched , rebundled watchify inside browserify task. here's how watch changes:

'use strict';  var config = require('../config'); var gulp = require('gulp');    gulp.task('watch', ['browsersync', 'server'], function() {   gulp.watch(config.scripts.src,  ['lint']);   gulp.watch(config.styles.watch, ['styles']);   gulp.watch(config.images.src,   ['images']);   gulp.watch(config.fonts.src,    ['fonts']);   gulp.watch(config.views.watch,  ['views']);  }); 

in general, rather manage 1 giant configuration file responsible creating multiple tasks, break down each task own file in gulp/tasks. file in folder gets automatically required loop.

to add new task, add new task file gulp/tasks.

this gulpfile.js

'use strict';  global.isprod = false;  require('./gulp'); 

and loop in ./gulp/index.js:

'use strict';  var fs = require('fs'); var onlyscripts = require('./util/scriptfilter'); var tasks = fs.readdirsync('./gulp/tasks/').filter(onlyscripts);  tasks.foreach(function(task) {   require('./tasks/' + task); });