How to add gulp-react to compile jsx files on the fly?

Question

Angular

Hello!
For the project I use one of the yoeman generators, namely generator-gulp-angular. Very satisfied, the generator does a lot of useful work on combining, minifying scripts, styles, etc.
It even glues and includes Angular templates.
Faced with the task of attaching ReactJs to the project. I would like to combine all jsx templates into one file, then compile to js and paste it into the project
. I tried to add the following task to gulp

var gulp = require('gulp');
var react = require('gulp-react');
var concat = require('gulp-concat');
var paths = gulp.paths;

gulp.task('jsxconcat', function () {
  return gulp.src(paths.src + '/{app,components}/**/*.jsx')
    .pipe(concat(paths.src + '/app/singlefile.js'))
    .pipe(react())
    .pipe(gulp.dest(paths.tmp +'/serve'));
});

As a result, the .tmp/serve/src/app/singlefile.js file is created and the compiled templates are indeed placed inside it, but when the project is opened in the browser, such a file is not in the list of connected ones.
How to fix ? Perhaps singlefile.js is created after gulp has injected all the scripts into index.html and is therefore not "visible". Help me to understand

Answer 1

Probably due to asynchrony.
This is how I cured less + css - with the run-sequence module .
As I see it, you will be like

var runSequence = require('run-sequence');

// .. some code

gulp.task('watch', [ /* deps list */ ], function(cb) {
  runSequence('jsxconcat', 'includeFilesToIndex.html', cb);
});

Answer 2

I figured it out, it's still useful to talk to smart people
. The error was that in task 'jsxconcat' I saved the resulting file to the directory with the already "compiled" code.
Now I changed it so that the file is saved to the directory with the source code and everything began to work! jsxconcat compiles jsx puts the already compiled javascript file in a directory with other scripts and then the inject task includes all the scripts in the main project file