Gulp babel not transpiling to es5

[vincentGustav]

I installed gulp babel (and dependencies) and when running gulp, same es6 code is being output in dist. I tried adding .babelrc to specify preset as well as specifying preset in gulp.

Is there anything I am missing?

gulpfile

var gulp         = require('gulp');
var babel        = require('gulp-babel');

gulp.task( 'customJS', function() {
    gulp.src( [ jsCustomSRC ] )
        .pipe( concat( jsCustomFile + '.js' ) )
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe( gulp.dest( jsDestination ) )
});

.babelrc

{
  "presets": ["@babel/env"]
}

package.json

  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-env": "^7.1.5",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.5.2"
  }

[Extarys]

I have the same issue I got no files being created nor do I get any error by the task where babel runs.

For completeness I've include my code below.

packages.js

  "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-stage-1": "^7.0.0", // Deprecated?
    "@babel/traverse": "^7.1.4",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-nodemon": "^2.4.1",
    "gulp-sass": "^4.0.2",
    "nodemon": "^1.11.0",

Task:

var DEST = 'build/'

gulp.task('build', () => {
  return gulp
    .src(['./src/**/*.js'])
    .pipe(
      babel({
        presets: ['@babel/preset-env']
      })
    )
    .pipe(gulp.dest(DEST))
})

[philwolstenholme]

I'm also seeing this behaviour with a similar setup to @vincentGustav's.

[Hamik25]

I'm also have this issue to @vincentGustav .

[ArnoMandersTfe]

I also had this probleem but wrapping it in a second array will fix it,

.pipe($.babel({
    presets: [['@babel/preset-env']]
}))

[superted17]

I experienced the same issue and could not get this working, even with the solution @ArnoMandersTfe has kindly provided.

Here is a Stack Overflow thread on this problem: https://stackoverflow.com/questions/52599370/gulp-babel-dont-produce-any-output-file-or-doesnt-work-properly

I could only get gulp-babel to work by using the Babel 6 install as outlined in the readme

[operapreneur]

@vincentGustav I have a similar setup and I was able to resolve the issue by replacing the @babel/env in both the gulpfile and .babelrc with @babel/preset-env

[thucxuong]

The reason is because of the preset and installed dependency is wrong. This error is not logged out so a lot of dev do not know

{ Error: Cannot find module 'babel-preset-env' from '/Users/xuongluuthich/Code/src-static'
- Did you mean "@babel/env"?
    at Function.module.exports [as sync] (/Users/xuongluuthich/Code/src-static/node_modules/resolve/lib/sync.js:58:15)
    at resolveStandardizedName (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:47:19) code: 'MODULE_NOT_FOUND' }

You need to install babel-preset-env yarn add -D babel-preset-env And in the configuration, the preset name should be @babel/env

[MaheshSasidharan]

Was anyone able to find a solution? The above merge updated from @babel/env to the new @babel/preset-env

Which is what I have been using, but I still get just a minified file with all require lines in it.

gulpfile.js

const gulp = require("gulp");
const babel = require("gulp-babel");
const sourcemaps = require("gulp-sourcemaps");
const uglify = require("gulp-uglify-es").default;
const concat = require("gulp-concat");

gulp.task("buildjs", () => {
  return gulp.src(paths.js.source)
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(concat(paths.build.destMinJSFileName))
    .pipe(babel())
    .pipe(uglify())
    .pipe(sourcemaps.write(paths.build.destMapFolder))
    .pipe(gulp.dest(paths.build.destBuildFolder));
});

---

.babelrc

{
    "presets": ["@babel/preset-env"]
}

---

package.json

"@babel/core": "^7.3.4",
"@babel/polyfill": "^7.2.5",
"gulp": "^4.0.0",
"gulp-concat": "^2.5.2",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify-es": "^1.0.4"

---

entry.js (paths.js.source)

require("@babel/polyfill");
require("./main")

---

bundle.min.js (actual output)

"use strict";require("@babel/polyfill"),require("./main")
//# sourceMappingURL=maps/bundle.min.js.map

[aminimalanimal]

I too could only get gulp-babel to work by using the Babel 6 install as outlined in the readme:

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

With this, you'll have presets: ['babel-preset-env'].

[bluebrown]

I have these issues as well. Gulp doesn't seem to use preset-env. I tried multiple variations with @babel/env, babel-preset-env & @babel/preset-env.

For some reason it seems to work now. I was using windows 10 earlier. Now I am home and use fedora. I did some changes to the project though. Maybe I just found the right combination. I think I had this before but still.

I just thought, maybe it is the node version I am using; 10.16.0. Pretty sure I have 12 installed on the windows machine. Even tho in electron itself it is 12 again!? Now I'm confused.

Here it is, maybe its useful to someone:

package.json

  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0"
  },

gulp

const transpileJSX = () => gulp.src([
  './App.jsx',
  './components/*.jsx',
]).
    pipe(babel({
      plugins: [
        '@babel/proposal-class-properties',
      ],
      presets: [
        '@babel/preset-react',
        '@babel/preset-env',
      ],
    })).
    pipe(gulp.dest('./preload/react-app/'));

[cbratschi]

No output here too on some files. Tried to downgrade gulp-babel but dependencies were broken.

[cbratschi]

Modified the gulp-babel code and logged the error on console. There was a JavaScript parsing error in babel in my case.

The this.emit(error) call is not output to console nor does it interrupt the gulp processing. This is not ideal for analyzing issues.

[kyle-jorve]

Has anyone figured this problem out yet? I'm also getting ES6 output from using gulp-babel.

package.json:

"babel": { "presets": [ "@babel/preset-env" ] }, "browserslist": [ "last 2 versions", "> 2%", "IE 11" ], "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "del": "^5.1.0", "fs": "0.0.1-security", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.0", "gulp-babel": "^8.0.0", "gulp-concat": "^2.6.1", "gulp-gzip": "^1.4.2", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-uglify": "^3.0.2", "gulp-uglifycss": "^1.1.0" }, "dependencies": {}

gulp.js:

const gulp = require('gulp'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const fs = require('fs'); const babel = require('gulp-babel'); const rename = require('gulp-rename');

const config = { bundleSrc: ['src/scripts/dependencies/.js', 'src/scripts/sources/bundle/.js'], perPageScripts: 'src/scripts/sources/', sassBundleSrc: 'src/sass/base/*/.scss', sassThemeSrc: 'src/sass/themes/' };

function buildBundle() { return gulp.src(config.bundleSrc) .pipe(babel()) .pipe(uglify()) .pipe(concat('bundle.min.js')) .pipe(gulp.dest('wwwroot/js')); }

function buildPageScripts(done) { fs.readdir(config.perPageScripts, function (err, items) { items.map(function (item) { if (fs.lstatSync(config.perPageScripts + item).isDirectory()) { if (item !== 'bundle') { gulp.src(config.perPageScripts+ item +'\*.js') .pipe(babel()) .pipe(uglify()) .pipe(rename(path => { path.dirname = ''; })) .pipe(gulp.dest('wwwroot/js')); }

        } else {
            gulp.src(config.perPageScripts + item)
                .pipe(babel())
                .pipe(uglify())
                .pipe(gulp.dest('wwwroot/js'));
        }
    });
});

done();

}

And in the output I still get things like node.closest() and Array.from(). Halp!

[kyle-jorve]

Wow I really don't know why my comment looks all janky like that. Sorry guys! I tried to fix it...

[nunospot]

Still not working.

PACKAGE.JSON

"devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "del": "^3.0.0",
    "gulp": "3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-clone": "^2.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-eslint": "^4.0.0",
    "gulp-merge": "^0.1.1",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-sequence": "1.0.0",
    "gulp-uglify": "^3.0.1",
    "gulp-watch": "5.0.1",
  }

TASK

gulp.src(themeScripts)
    .pipe(babel({
        "presets": [
            [
                "@babel/preset-env",
                {
                    "targets": {
                        "browsers": [
                            "last 2 version",
                            "> 1%",
                            "ie 10",
                            "safari >= 7"
                        ]
                    }
                }
            ]
        ]
    }))
    .pipe(concat('theme.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js));

Excerpt that was not transpiled

{key:"sendRequest",value:function(e){return new Promise(function(t,n){var i=new XMLHttpRequest;i.open("GET",e,!0),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.onload=function(){if(200!=i.status)n({status:i.status,statusText:i.statusText});else if(""=="".concat(i.response))n({status:i.status,statusText:"empty response"});else{var e=JSON.parse("".concat(i.response));t(e)}},i.onerror=function(){n({status:i.status,statusText:i.statusText})},i.send()})}}

The Promisse should be transpiled to ie10, since are one of my target.

[danyj]

Same here, using webpack 4 + babel-loader with same dependencies works out of the box, gulp-babel is a no go for any version/presets/plugins combinations. Files get moved to dest but they are not transpilled . No errors either.

[samvk]

For us it turned out the issue wasn't directly related to gulp-babel, but that our browserslist was no longer transpilling down for IE11 (which has now hit <2%) so most ES6 features (arrow function, etc.) were correctly being left alone.

[mkstix6]

I'm struggling to get gulp-babel to do a simple transpile a file with occurrences of String.prototype.includes.

I would be grateful to see a recipe that transpiles String.prototype.includes for: gulp@^4 gulp-babel@^8 @babel/core@^7 @babel/preset-env@^7

I've tried adding the babel preset and a browserslist but the output from the transpile is a file that still has .includes and I can see no presence of a polyfill.

.browserslistrc

IE 11
> 0.25%
not dead

[ghost]

Thought I'd leave my two cents in here. Started a nearly bearbones project and gulp-babel refuses to do anything. Every other step in my gulp pipeline operates successfully, only the babel() command doesn't do anything, even though I'm using @babel/preset-env @ ^7.8.3 with @babel/core @ ^7.8.3 and core-js @ ^3.6.4 for use with preset-env. Here's my .babelrc in the root of my project:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "8.0", // I'm building a CLI
                    "browsers": "ie > 4" // Just added this to test if it would actually change anything
                },
                "useBuiltIns": "entry",
                "corejs": {
                    "version": 3,
                    "shippedProposals": true,
                    "proposals": true
                }
            }
        ]
    ]
}

The suggestion to switch to babel-preset-env above is misleading since that module has been depracted and migrated to @babel/preset-env, and I want to use babel 7 to transpile all my javascript code.
This is my gulpfile.js:

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify-es').default;
const pipeline = require('readable-stream').pipeline;
const concat = require('gulp-concat');

gulp.task('build', function() {
    return pipeline(
        gulp.src('./src/*.js'),
        concat('lib.js', { newLine: '\r\n' }),
        babel(),
        // Skipping minification for checking gulp-babel's output
        gulp.dest('./lib/')
    );
});

I know that maintaining these open-source projects for no money whatsoever is a pain in the ass, but there are a lot of people that are relying on this module for their projects. I believe we'd all greatly appreciate a fix, or at least start logging the errors in the code ;)

[irbian]

Ok, don´t know if it´s of any help but I can share my debug process

.pipe(babel()) with a babel.config.js, didn´t work .pipe(babel()) with a babel.config.json, didn´t work .pipe(babel({ presets: ['@babel/preset-env'] })) did something .pipe(babel({ presets: [['@babel/preset-env', { "useBuiltIns": "usage", "core": "3.6" }]] })) didn´t work .pipe(babel({ presets: [['@babel/preset-env', { "useBuiltIns": "usage", "corejs": "3.6" }]] })) did something .pipe(babel()) with a babel.config.json (with corejs instead of core) did something .pipe(babel()) with a babel.config.js (with corejs instead of core) did something

So... I don´t know where the I got the core property? And another issue is ¿why it doesn´t show any message?

[lpcaldeira]

npm update solve it for me :)

[jackcylin]

yarn add -D @babel/preset-env work for me

[timocouckuyt]

.pipe(babel({ presets: [['@babel/preset-env', { "useBuiltIns": "usage", "corejs": "3.6" }]] }))

Worked here, but babel added some require('s at the start of the file, which is why I see it worked, so I pressume you'll need to get rollup in the mix to resolve the requires?