Как сделать сборку jsx используя browserify?

Question

Andrey Dyrkov @VIKINGVyksa

front-end developer

Как сделать сборку jsx используя browserify?

Нашёл пару примеров как собирать, там используют кучу модулей, но у меня также не получилось.

Решил просто сначала gulp-react переводить в js а через пару сек собирать всё в один модуль browserify

Но блин вообще изменения не видит, ниодин таск не выполняется когда я меняю файл. Не знаю почему так((
Но блин всё собирается, только watch не работает нормально. В чём может быть ошибка? или предложите подругому собирать, чтобы получилось всё)

var gulp        = require('gulp'),
    cssPrefixer = require('gulp-autoprefixer'),
    cssMin      = require('gulp-minify-css'),
    rename      = require('gulp-rename'),
    sass        = require('gulp-sass'),
    jsMin       = require('gulp-uglify'),
    watch       = require('gulp-watch'),
    //react
    react       = require('gulp-react'),

    browserify  = require('gulp-browserify'),
    rimraf      = require('rimraf'),
    browserSync = require('browser-sync'),
    reload      = browserSync.reload;


/*------------------------------------*\
    #PATH
\*------------------------------------*/

var path = {
  dist:{
    html:'./dist/',
    css:'./dist/css/',
    js:'./dist/js/',
    jsx:'src/js/',
    img:'./dist/images/',
    font:'./dist/fonts/',
    libs:'./dist/libs/'
  },

  src:{
    html:'./src/*.html',
    css:'src/sass/index.scss',
    js:'src/js/index.js',
    jsx:'src/js/*.jsx',
    img:'src/images/**/*.*',
    font:'src/fonts/**/*.*',
    libs:'src/libs/**/*.*'
  },

  watch:{
    html:'./src/*.html',
    css:'./src/sass/**/*.*',
    js:'./src/js/**/*.*',
    img:'./src/images/**/*.*',
    font:'./src/fonts/**/*.*'
  },

  clean:'./dist/'
};

/*------------------------------------*\
    #CONFIG SERVER
\*------------------------------------*/

var config = {
    server: {
        baseDir: "./dist"
    },
    tunnel: false,
    host: 'localhost',
    port: 8080,
    logPrefix: "Front-end"
};

/*------------------------------------*\
    #TASKS
\*------------------------------------*/

// #server
gulp.task('webserver', function () {
    browserSync(config);
});

// #clean
gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

// #html
gulp.task('html', function () {
    gulp.src(path.src.html)
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream: true}));
});

// #javascript
gulp.task('js', function () {
    gulp.src(path.src.js)
        .pipe(browserify({
         }))
        .pipe(jsMin())
        .pipe(rename('app.min.js'))
        .pipe(gulp.dest(path.dist.js))
        .pipe(reload({stream: true}));
});

// #jsx
gulp.task('jsx',function(){
    gulp.src(path.src.jsx)
        .pipe(react())
        .pipe(rename({
            suffix:'-react'
         }))
        .pipe(gulp.dest(path.dist.jsx));
    setTimeout(function(){
        gulp.start('js');
    },2000);
});

// #libs
gulp.task('libs',function(){
  gulp.src(path.src.libs)
    .pipe(gulp.dest(path.dist.libs));
});

// #sass
gulp.task('style', function () {
    gulp.src(path.src.css)
        .pipe(sass({
        }).on('error',sass.logError))
        .pipe(cssPrefixer({
            browsers: ['last 10 versions'],
            cascade: false
        }))
        .pipe(cssMin())
        .pipe(rename('app.min.css'))
        .pipe(gulp.dest(path.dist.css))
        .pipe(reload({stream: true}));
});

// #images
gulp.task('image', function () {
    gulp.src(path.src.img)
        .pipe(gulp.dest(path.dist.img))
        .pipe(reload({stream: true}));
});

// #fonts
gulp.task('fonts', function() {
    gulp.src(path.src.font)
        .pipe(gulp.dest(path.dist.font));
});

/*------------------------------------*\
    #BUILD TASK
\*------------------------------------*/

gulp.task('build', [
    'html',
    'jsx',
    'style',
    'fonts',
    'image',
    'libs'
]);

/*------------------------------------*\
    #WATCH TASK
\*------------------------------------*/

gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html');
    });
    watch([path.watch.css], function(event, cb) {
        gulp.start('style');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('jsx');
    });
    watch([path.watch.jsx], function(event, cb) {
        gulp.start('jsx');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image');
    });
    watch([path.watch.font], function(event, cb) {
        gulp.start('fonts');
    });
});

/*------------------------------------*\
    #DEFAULT TASK
\*------------------------------------*/

gulp.task('default', ['build', 'webserver', 'watch']);