Can't get es6 to work with Gulp

Question

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!

Answer 1

There are two problems:

1. Gulp seems like doesn't support you syntax for file extension mask:

   gulp.src('js/*.(jsx|js)') // not working
   gulp.src('js/*.{js,jsx}') // working
   

2. You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working

Update

Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid

gulp.src('js/*.@(js|jsx)')

where @ means match exactly one occurrence of pattern after @.

In your case there was no qualifier presented