Cannot get es6 to work with Gulp

Question

It drives me crazy, so I hope someone sees what I miss. Thank you for your help.

I have a gulp file and I installed it through npm, babel-core, babel-preset-es2015, babel-preset-react. From online research and in high hopes, although this may not be the case, I renamed the gulp file to the gulpfile.babel.js file, and I created the .babelrc file with

{ "presets": ["es2015"] } 

I use browsers and when I run the gulp task, the html file is loaded, but in index.js I have "import React ....". These files cause an error in the JS console that says: "Unused SyntaxError: Unexpected token import."

I thought the es2015 npm packages I have should take care of this ES6 syntax?

In the gulp file, the task I was thinking about had to take care of this:

 // 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 its launch:

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

I am puzzled by what might be wrong here?

Any ideas would be greatly appreciated!

Answer 1

There are two problems:

• Gulp doesn't seem to support the file extension mask syntax:

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

• You are moving from the js directory to the js directory, but since there are no matches due to problem (1), it makes you think that babel is not working.

Update

Gulp uses glob syntaxt to match files - according to glob syntax, the classifier for the number of elements must be enabled before ( | ) - in our case, the following syntax will be valid

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

where @ means only one occurrence of the pattern after @ matches.

In your case, no qualifier was submitted