gulp-babel is failing to generate any output files or is experiencing issues with its functionality

I am currently developing a JavaScript library and my goal is to transpile all ES6 code to the ES5 standard in order to increase browser support.

To achieve this, I have decided to utilize Babel with Gulp tasks. In preparation, I have installed the necessary NPM packages listed in my 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"
}

In addition, my .babelrc file contains the following presets:

{
  "presets": ["env"]
}

The contents of my gulpfile.js are as follows:

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())     // No need to pass preset since it's specified in .babelrc
        .pipe(concat('output.js'))   
        .pipe(sourcemaps.write('.'))   
        .pipe(gulp.dest('build/js'))
});

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

However, when I run the gulp command from the project root directory, no output file is generated. Despite receiving a successful execution message in the console, nothing appears in the build/js directory or any other part of the project.

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

Even after attempting to remove the sourcemaps functions, the issue persists - still, nothing gets produced!

Answer №1

When I ran babel -V in the terminal, I was surprised to see a different version displayed:

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

This version did not match what I had originally installed:

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

In response, I uninstalled these dependencies:

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

And replaced them with the following versions:

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

After making these changes, all functions are now working properly!


The solution to this issue came from reading a note in the README.md of the gulp-babel plugin. It was a frustrating problem that caused me quite a headache.

For more information, refer to the installation guide on GitHub for gulp-babel.

Install

Follow the instructions below to install the pre-release 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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for resolving the problem: [$sce:itype] while using AngularJS version 1.6

I'm encountering an issue with $sce while using AngularJS 1.6.4: Error: [$sce:itype] http://errors.angularjs.org/1.6.4/$sce/itype?p0=html Stack trace : L/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:6:425 trustA ...

I am attempting to generate a displacement map effect to smoothly transition between three images using the ThreeJs library, but I have hit a roadblock

My journey with ThreeJS started a few months back, leading me into the fascinating world of webgl. I delved into numerous courses on YouTube, but most of them were centered around 3D compositions. While I have developed a basic understanding of how things ...

What is the process for extracting the value of a checkbox generated through JavaScript?

I recently came across a helpful post on Stack Overflow that provided sample code demonstrating how to display multiple list of checkboxes dynamically on a dropdown list. The function in the code was exactly what I needed for my webpage. However, I encount ...

Remove JS Sass so that I can revert to using Ruby Sass

I recently installed SASS on my Mac, but I've been encountering some issues with it randomly crashing or not working properly. I never had these problems with the old Ruby version that was on my previous Mac. Now, I'm looking to uninstall SASS so ...

Ionic 2 encountering issue with `ctorParameters.map` not being a function error

Recently, I wanted to incorporate the Network-information plugin into my project but encountered compatibility issues with an older version of Ionic-native. To resolve this, I took the following steps: npm rm --save ionic native npm install --save ionic-n ...

ReactJS implementation for selecting names from a dropdown menu

Hello, I am new to using React. I have a dropdown form with a search engine in it that is working perfectly as I need. The only issue is that when I type, for example, AR in the Symbol field, it shows me ARDRBTC as expected, but I am unable to click on it ...

Error: The 'address' property cannot be found in the specified 'string' type

Hey there! I'm currently facing an issue while trying to pass an object from one page to another and store it in the object on the second page. I'm encountering an error with EsLint. let accountDetails:any={ name:this.userAccount.name, p ...

"Utilizing the Bootstrap framework to enhance the functionality

I have a bootstrap table containing data that needs to be edited, with certain fields not displayed in the table. To enable editing, I have added an edit button to each row along with a modal form. The button successfully loads the modal form without any ...

Upon migrating from Vue CLI 2 to 3, an error is thrown stating: "Cannot locate element: #app" and an empty body is

Currently, I am in the process of transitioning my VueJS project from VueCLI 2 to version 3. After moving all the necessary files to the src folder, I attempted to view it in the browser by running npm run serve. However, I encountered a problem where the ...

Updating the title of a page on CoreUI's CBreadcrumbRouter dynamically

I'm currently developing a project with VueJS and the CoreUI admin template. Is there a way I can change the title of the current page as shown on the CBreadcrumbRouter? The GitHub documentation mentions that the script typically displays meta.label ...

ng-if is executed prior to the specified time

This unique Soundcloud player was created using Plangular, a directive that utilizes AngularJS and the Soundcloud API. Due to certain restrictions with third party apps not being able to stream some Soundcloud tracks, I have implemented ng-if="track" and n ...

Having trouble with implementing $off and passing parameters with eventbus in Vue

Creating an eventBus in main.js: Vue.prototype.$eventHub = new Vue() In component1: this.$eventHub.$emit('logged-in') Attempting to use the event in component2: beforeMount () { this.$eventHub.$on('logged-in', function () { ...

Unable to modify $scope value within the directive

This special function triggers once ng-repeat is done iterating through the list using scope.$last: simpleSearchApp.directive('afterResults', function($document) { return function(scope, element, attrs) { if (scope.$last){ scope.windowHe ...

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

Guide to setting up the most recent stable release of node.js on Centos 7

Looking to install the most up-to-date stable version of node.js on CentOS 7? Wondering the simplest method to install the latest node.js along with nvm and npm on your CentOS 7 system? Seeking a solution that does not involve downloading the source code ...

Exploring iPhone Safari Web App: Discovering functions tailored for iPhone users

I am exploring the possibilities of accessing native iPhone features while developing a Web App using html/css/javascript and running it in Safari. I am curious to know if I can tap into smartphone-specific features, especially those unique to iPhone/iTou ...

Jump to Anchor when Page Reloads

Hey there! I'm currently developing a gallery script and I'm trying to figure out how to automatically position the page to the top of a specific anchor when it is loaded. I attempted to use the following code: <script>location.href = "#tr ...

Can you explain the role of the next() function in middleware/routes following the app.use(express.static(...)) in Express

When dealing with serving static assets generated from React source code using npm run build, the following method can be used: app.use('/', express.static(path.join(__dirname, 'apps', 'home', 'build'))) To protect ...

Discovering the potential of utilizing an array transmitted by Node/Express on the server-side and integrating it into Google Maps on the client-side

When attempting to set up clustering markers on Google Maps, I encountered a challenge. Client-Side <script> // Code snippet from Google Map docs function initMap() { // Array of locations const locations = [ { lat: -31.56391, lng: 147.15 ...

jQuery: Performing actions on elements that are both statically included and dynamically generated (using delegated events)

Upon loading the page, I have some "static" HTML tags within a container with the class .file_item and an id of #files_container. Subsequently, new .file_item's are appended (or prepended) to the same container using Ajax without requiring a refresh. ...