setup browserify watcher with laravel elixir

Question

i'm trying to add a browserify watcher to compile automatically my changes to some react components of mine but the watcher doesn't work...

This is driving me nuts! I don't understand why these task runners have to be so complicated and don't have a standard API!

Any help will be greatly apreciated!

Anyway here's my browserify task

// react components
elixir(function(mix) {
    mix.browserify(assetsJsDir + "components/*.jsx");
});

And here's the whole gulpfile.js

var elixir = require('laravel-elixir');

elixir.config.js.browserify.watchify.enabled = true;

var bowerDir = './bower_components/';
var assetsJsDir = './resources/assets/js/';
var assetsCssDir = './resources/assets/css/';

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

// styles
elixir(function(mix) {
    mix.sass('app.scss')
    .version(['css/app.css']);
});

// external libs js files
elixir(function(mix) {
    mix.scripts([
        bowerDir + 'jquery/dist/jquery.min.js',
        bowerDir + 'bootstrap/dist/js/bootstrap.min.js',
        bowerDir + 'react/react.js',
        bowerDir + 'react/react-dom.js',
        bowerDir + 'lodash/dist/lodash.min.js',
    ], 'public/js/extlibs.js', ".")
    .version(['js/extlibs.js']);
});

// react components
elixir(function(mix) {
    mix.browserify(assetsJsDir + "components/*.jsx");
});

// my libs js files
elixir(function(mix) {
    mix.scripts([
        assetsJsDir + "pagevars.js",
        assetsJsDir + "traininglog-lib.js",
        assetsJsDir + "session_new.js",
    ], "public/js/app.js")
    .version(['js/app.js']);
});

Answer 1

I was using the wrong method.

What I wanted to do was

elixir(function(mix) {
    mix.babel([
        assetsJsDir + "components/*.jsx"
    ], "public/js/components.js")
    .version("js/components.js");
});

Now it works