Can't get es6 to work with Gulp

This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.

I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with

{
  "presets": ["es2015"]
}

I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.

I thought the es2015 npm packages I have should be taking care of that ES6 syntax?

In the gulp file the task that I thought was suppose to take care of that is;

// 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
        }))
});

The gulp task that is responsible for launching this is:

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

I am puzzled as to what could be wrong here?

Any ideas would be much much appreciated!