8

I'm working on a JS library and I want to transpile all javascript code written in ES6 to ES5 standard to get more support in current browsers.

The thing is I want to use Babel with the Gulp tasks, so I've installed all this NPM packages [package.json]:

"devDependencies": {
  "@babel/core": "^7.1.2",
  "@babel/preset-env": "^7.1.0",
  "babel-cli": "^6.26.0",
  "gulp": "^3.9.1",
  "gulp-babel": "^8.0.0",
  "gulp-concat": "^2.6.1",
  "gulp-sourcemaps": "^2.6.4",
  "gulp-terser": "^1.1.5"
}

Next my .babelrc file has the following content:

{
  "presets": ["env"]
}

And the gulpfile.js is written as following:

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

gulp.task('minify', function () {
    return gulp.src('src/app/classes/*.js')
        .pipe(sourcemaps.init()) 
        .pipe(babel())     // I do not pass preset, because .babelrc do exist
        .pipe(concat('output.js'))   
        .pipe(sourcemaps.write('.'))   
        .pipe(gulp.dest('build/js'))
});

gulp.task('default', ['minify']);

The issue is when I execute the gulp command on the project root directory, it not produce output file. The console shows a successful execution but nothing appears inside build/js directory, or neither inside another directory of the project.

#user1:/project-route$> gulp
    [17:36:54] Using gulpfile /project-route/gulpfile.js
    [17:36:54] Starting 'minify'...

I also tried without sourcemaps functions and the result is the same, nothing!!!.

Yulio Aleman Jimenez
  • 1,642
  • 3
  • 17
  • 33

1 Answers1

10

For an extrange reason, when I execute in terminal babel -V the result is:

#user1:/project-route$> gulp
    6.26.0 (babel-core 6.26.3)

This is not the same version I installed (that I remember):

"@babel/core": "^7.1.2", 
"@babel/preset-env": "^7.1.0",

So, I uninstalled all this dependencies:

"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"gulp-babel": "^8.0.0",

And I installed this ones in replacement:

"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",

And all functions works now!!!


Of course, the explanation is accordingly to this note on the README.md of the gulp-babel plugin, realizing about this matter cost me a lot of headaches:

Install guide (gulp-babel on GitHub)

Install

Install gulp-babel if you want to get the pre-release of the next version of gulp-babel.

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env
Yulio Aleman Jimenez
  • 1,642
  • 3
  • 17
  • 33
  • Hey man, I know this post is a few months old now, but I and as I've seen some other people (according to the open issue on gulp-babel github repo) still have this issue where it just wont transpile the code down properly. If I want to work with modules for example, and I have import/export, it just reads it the import (I think) as `require` and in the browser returns `require is not defined`. I did the same thing as you, installed the Babel 6 version, still the same problem. Mind sharing some more info how you got it working? – Petar Jan 27 '19 at 22:11
  • As you said, it was some months ago, but basically I did what I wrote, of course before to find out this solution, I tried many other solutions during my research. – Yulio Aleman Jimenez Jan 28 '19 at 23:25
  • So what do I actually type to install the working version? The readme is still unclear. – James South Jul 24 '19 at 01:46
  • That's depend on what is the Babel version you are using. Execute in terminal `babel -V` and the version of the `babel-core` that the terminal show, must be the same as the babel version installed in your project or that appears in the `package.json` file. Then execute the correct command to install `gulp-babel` accordingly to the right Babel version you have. – Yulio Aleman Jimenez Aug 20 '19 at 21:31