Не могу заставить es6 работать с Gulp

Это сводит меня с ума, поэтому я надеюсь, что кто-то может увидеть что-то, чего мне не хватает. Заранее спасибо за помощь.

у меня есть файл gulp, и я установил через npm, babel-core, babel-preset-es2015, babel-preset-react. Из исследования в интернете и в больших надеждах, хотя это может быть неправильно, я переименовал файл gulp в gulpfile.вавилонское столпотворение.js и я создали a .файл babelrc с

{
  "presets": ["es2015"]
}

Я использую browsersync и когда я запускаю задача gulp загружает html-файл, но индекс.js у меня включает ' import React....'. Эти файлы вызывают ошибку в консоли JS, которая говорит "Uncaught SyntaxError: неожиданный импорт токенов".

Я думал, что пакеты es2015 npm, которые у меня есть, должны заботиться об этом синтаксисе ES6?

в файле gulp задача, которая, как я думал, должна была позаботиться об этом;

// convert jsx to JS
gulp.task('babelFiles', function() {
    return gulp.src('js/*.(jsx|js)')
        .pipe(babel({
            compact: false
            }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

задача gulp, которая отвечает за запуск этого есть:

// Default task
gulp.task('default', ['babelFiles', 'browserSync']);

я озадачен тем, что здесь может быть не так?

любые идеи были бы очень признательны!