How to make Gulp read babel.config.js of Babel7 in the root of the project?

Question

This is my project structure:

Project
|-module1
|  |-package.json
|  |-gulpfile.babel.js
|-module2
|  |-package.json
|  |-gulpfile.babel.js  
|-package.json
|-scripts.js
|-babel.config.js 

As you see in root of the project I have scripts.js that exports some things. After reading all the information about Babel7 configuration here in the root of the project I created babel.config.js with the following content:

module.exports = {
  presets: [
    ['@babel/env', {
      targets: {
        node: 'current',
        firefox: '60',
        chrome: '67',
        safari: '11.1',
      },
    }],
  ],
};

As I understand I don't need to create .babelrc in module1 and module2 as I have a babel.config.js in the root. However, when I run gulp on module1 I see that gulp doesn't find the configuration for babel as I get:

Project/module1/gulpfile.babel.js:26
import gulp from 'gulp';
       ^^^^
SyntaxError: Unexpected identifier

Where is my mistake?

Answer 1

The only solution I found is the following - we should use gulpfile.js instead of gulpfile.babel.js and config babel manually. I mean:

in Project/module1/gulpfile.js

require('@babel/register')({
    configFile: './../babel.config.js',
    ignore: [/node_modules/]
})
require('./tasks')

and in Project/module1/tasks.js we put all gulp tasks.