0

I'm trying to combine both JS and JSX files (to use with React.js) in a single, versioned all.js file.

My current Gulpfile:

var elixir = require('laravel-elixir');
elixir.config.sourcemaps = false;

elixir(function(mix) {
        mix
        .less([
                'app.less'
        ], null, 'resources/assets/less')
        .babel([
                'libs/**', //contains react.js among other libs (jquery, bootstrap)
                'app.js', //contains normal jquery
                'quiz/quiz.jsx'
        ], null, 'resources/assets/js')
        //.babel([
                //'quiz/quiz.jsx'
        //])
        .version(["css/app.css", "js/all.js"]);
});

Output:

[18:38:28] Starting 'default'...
[18:38:28] Starting 'less'...

Fetching Less Source Files...
   - resources/assets/less/app.less


Saving To...
   - public/css/app.css

[18:38:30] Finished 'default' after 1.91 s
[18:38:34] gulp-notify: [Laravel Elixir] Less Compiled!
[18:38:34] Finished 'less' after 6 s
[18:38:34] Starting 'babel'...

Fetching Babel Source Files...
   - resources/assets/js/libs/**/**/*
   - resources/assets/js/app.js
   - resources/assets/js/quiz/quiz.jsx


Saving To...
   - public/js/all.js <---- STUCK HERE

It's been stuck there for a while and I'm not sure how to debug this.
Changing the first babel() with scripts() works, but of course won't compile the JSX file (and won't complain about it).
Calling babel after scripts (the 3 commented out lines) will correctly compile the JSX file, but without everything else (it will simply compile the JSX and save it to all.js).

How can I fix this?

Paweł Obrok
  • 22,568
  • 8
  • 74
  • 70
koichirose
  • 1,815
  • 4
  • 22
  • 30
  • Can you tell us if the CPU is being used actively (`top` output) and/or if the file `public/js/all.js` is being written to? – Mark Rousskov Aug 13 '15 at 22:42
  • Yes, the CPU spikes to 100% with the command 'gulp' (using htop). The JS file doesn't seem to be touched by anyone during 'gulp' (using lsof | grep all). The CPU spikes to 100% anyway when running 'gulp' without babel (until it finishes, of course) – koichirose Aug 14 '15 at 07:33
  • I just tried and this happens on another machine, too (OSX, the other one was Linux) – koichirose Aug 14 '15 at 10:56
  • Can you try running `gulp` with `NODE_DEBUG=babel` or `DEBUG=babel` (seems to depend on OS which one is needed), and see if there is any output similar to `babel [BABEL] test.js: Parse start +0ms`. If there is, see if it hangs on any specific step. (and, if possible, post the entire debugging output that you should see). – Mark Rousskov Aug 14 '15 at 12:56
  • Here it is, omitting everything up to `Saving to all.js`. Can't post it here because it's too long: http://pastie.org/10352925 - is it weird that it's going to `resources/assets/js/quiz/all.js`? – koichirose Aug 15 '15 at 14:39
  • From the debugging output you posted, it seems that Babel is generating the code... how long have you waited for before killing the process? It would seem to me that it might eventually output the result. As to why it's apparently generating `resources/assets/js/quiz/all.js`, I'm not sure, but do you require that file from any other file? – Mark Rousskov Aug 15 '15 at 16:19
  • I've let it run for about 10 minutes, something must be wrong... I'm requiring quiz.jsx only, and only from my gulpfile – koichirose Aug 15 '15 at 16:38
  • Here are the contents of quiz.jsx: http://pastie.org/10353104 – koichirose Aug 15 '15 at 16:44
  • So, I let it run for a while. It finished after 23 minutes (!) and the resulting js file is somehow messed up by babel. The JSX part looks fine but it seems it messed up something with my normal JS (specifically, Isotope.js) and now I had to revert back and removed quiz.jsx. What's the correct way to combine JS and JSX? – koichirose Aug 17 '15 at 09:27
  • What do you mean by "messed something up"? Can you post the two versions (or a `diff` between them), one before Babel and one after? – Mark Rousskov Aug 17 '15 at 13:47
  • Without Babel Isotope.js, which is already minified, is left untouched. Babel adds a "use strict" at the top, and "unminifies" it (variable names are left as they were, line breaks and whitespace are added back). I can't really diff them. I don't know if "use strict" is what's causing it, but this is happening now: http://pastie.org/10356782 - so there's that 'undefined' at line 15 of my pastie. I'm not sure if there are more differences in the subsequent js files since I guess it stops at the first error. I think my goal is to have Babel process only JSX files, couldn't find any docs though. – koichirose Aug 17 '15 at 15:20
  • Do all your JSX files have the `.jsx` extension? – Mark Rousskov Aug 17 '15 at 15:23
  • It's just that one, but yes. – koichirose Aug 17 '15 at 16:09
  • Hmm, perhaps you can limit the files passed through Babel in Laravel Elixir? Babel doesn't have an extension-based limiter when using through the API and not the CLI (as far as I know). – Mark Rousskov Aug 17 '15 at 16:34
  • I'd love to do that. Documentation about laravel-elixir is almost non-existant though... – koichirose Aug 17 '15 at 16:37

0 Answers0