Как добавить gulp-react для компиляции jsx файлов налету?

Question

[Роман]

Всем привет!
Для проекта использую один из yoeman генераторов, а именно generator-gulp-angular. Очень доволен, генератор выполняет кучу полезной работы по объединению, минификации скриптов, стилей и т.д.
Даже склеивает и инклудит ангуляровские шаблоны.

Столкнулся с задачей прикрутить в проект ReactJs. Хотел бы объединить все jsx шаблоны в один файл, потом скомпилировать в js и вставить в проект

Пробовал добавить в 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'));
});

В результате файл .tmp/serve/src/app/singlefile.js создается и внутри него действительно размещены скомпилированные шаблоны, но когда проект открывается в браузере - то такой файл отсутствует в списке подключенных.
Как исправить ? Возможно singlefile.js создается после того, как gulp заинжектил все скрипты в index.html и поэтому он и не "виден". Помогите разобраться

Answer 1

[Mikhail Osher]

Вероятно, из-за асинхронности.
Я таким образом лечил less + css - модулем run-sequence.

Как я вижу, у Вас будет вроде

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

// .. some code

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

Comments

[Роман]

Спасибо, сегодня попробую ваш совет!

[Роман]

вот так у меня выглядит таск на watch:

gulp.task('watch', ['jsxconcat','inject'], function () {
gulp.watch([
paths.src + '/*.html',
paths.src + '/{app,components}/**/*.scss',
paths.src + '/{app,components}/**/*.js',
'bower.json'
], ['jsxconcat','inject']);
});
куда вставить runSequence ?

Answer 2

[Роман]

Разобрался, все таки полезно пообщаться с умными людьми

Ошибка была в том, что в task 'jsxconcat' я сохранял результирующий файл в каталог с уже "скомпилированным" кодом.
Сейчас поменял, чтобы файл сохранялся в каталог с исходным кодом и все стало работать! jsxconcat компилирует jsx кладет уже скомилированный javascript файл в каталог с другими скриптами и затем таск inject включает все скрипты в основной файл проекта