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!!!.
For an extrange reason, when I execute in terminal
babel -V
the result is:This is not the same version I installed (that I remember):
So, I uninstalled all this dependencies:
And I installed this ones in replacement:
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)