Почему при сборке пакета gulp на страницу html ничего не вывелось?

Question

[Gagatyn]

папка source/app.js

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    <h1>
        Hello <b>React</b>!
    </h1>,
    document.getElementById("app")
)

Gulpfile.js

gulp.task('babelJSX', function() { // для транспиляции jsx
    return gulp.src('js/source/**/*.js')
        .pipe(babel({
            plugins: ['transform-react-jsx']
        }))
        .pipe(gulp.dest('js/build'))
});

gulp.task('babel', function() { // для es2015
    return gulp.src('js/build/**/*.js')
        .pipe(babel({ presets: ["@babel/preset-env", "@babel/preset-react"] }))
        .pipe(gulp.dest('js/build'))
});

gulp.task('browserify', function() { // создание одного пакета bundel.js
    return gulp.src('js/build/**/*.js')
        .pipe(browserify({
            transform: ['es6ify'],
            extensions: ['.js']
        }))
        .pipe(rename('bundle.js'))
        .pipe(gulp.dest('./'))
});

gulp.task('concat', function() { // bundle.css
    return gulp.src('css/**/*.css')
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest('./'));
});

Запускаю:
1. gulp babelJSX
2. gulp babel
3. gulp browserify
4. gulp concat
Все сработало, но html пуст. Скомпилировалось куча всего в bundle.js, в нём нет даже строчки Hello или getElementById('app'). Подскажите в чем ошибка, быть может воспользоваться каким-нибудь аналогом browserify?

Comments

[Gagatyn]

Никита Егоров, я проверял. Ответ не помог. Дело в том, что при выполнении task browserify в bundle.js отсутствует код, который есть в папке js/source/app.js. Вот сам проект, установить зависимости нужно.

[Антон Спирин]

Gagatyn, да поставьте себе уже create-react-app пока с webpack не разобрались.

[Gagatyn]

Антон Спирин, ц, что ж так сложно то. Ок