Gulp Babel

Gulp Babel provides a Gulp plugin that integrates Babel JavaScript transpilation into build pipelines, enabling developers to transform modern JavaScript (ES2015+) code into backward-compatible versions for broader browser support.

Package Information

• Package Name: gulp-babel
• Package Type: npm
• Language: JavaScript
• Installation: npm install --save-dev gulp-babel @babel/core

Core Imports

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

For ES6 imports:

import babel from 'gulp-babel';

Basic Usage

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

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist'))
);

Capabilities

Babel Transform Stream

Creates a transform stream that processes JavaScript files through Babel transpilation in Gulp pipelines.

/**
 * Creates a Gulp transform stream for Babel transpilation
 * @param {Object} [opts] - Babel configuration options
 * @returns {Transform} - Node.js transform stream for Gulp pipelines
 */
function babel(opts);

Parameters:

• opts (Object, optional): Babel configuration options
  • All standard Babel options are supported except sourceMap and filename which are handled automatically
  • presets (Array): Babel presets to apply (e.g., ['@babel/env'])
  • plugins (Array): Babel plugins to apply (e.g., ['@babel/plugin-transform-arrow-functions'])
  • caller (Object): Caller identification object (merged with default {name: 'babel-gulp'})
  • ignore (Array): Patterns for files to ignore during transformation

Returns:

• Transform stream that processes Vinyl file objects
• Automatically handles file extension changes (e.g., .jsx → .js)
• Integrates with gulp-sourcemaps for source map generation
• Adds transformation metadata to processed files via file.babel property

File Processing Features:

• Processes buffer contents (streaming not supported)
• Skips null files without error
• Automatically renames file extensions to .js (preserves files without extensions)
• Provides comprehensive error handling with file context
• Requires @babel/core@^7.0.0 as peer dependency

Source Map Integration:

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

gulp.task('default', () =>
    gulp.src('src/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'))
);

Babel Metadata Access: Files processed through the stream receive a babel property containing transformation metadata from babel.transform():

const gulp = require('gulp');
const babel = require('gulp-babel');
const through = require('through2');

function logBabelMetadata() {
    return through.obj((file, enc, cb) => {
        console.log(file.babel); // Access transformation metadata
        cb(null, file);
    });
}

gulp.task('default', () =>
    gulp.src('src/**/*.js')
        .pipe(babel({
            plugins: [{
                post(file) {
                    file.metadata.test = 'metadata';
                }
            }]
        }))
        .pipe(logBabelMetadata())
);

Error Handling: The plugin emits descriptive errors for common issues:

• Incompatible Babel version: @babel/core@^7.0.0 is required
• Streaming not supported: Streaming not supported
• Babel transformation errors are wrapped with file context

Dependencies

Peer Dependencies:

• @babel/core: ^7.0.0 (required for transpilation)

Runtime Dependencies:

• plugin-error: Error handling for Gulp plugins
• replace-ext: File extension replacement utility
• through2: Stream transformation utilities
• vinyl-sourcemaps-apply: Source map integration for Vinyl files

Examples

Basic ES2015 Transpilation:

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

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

With Transform Runtime:

gulp.task('babel', () =>
    gulp.src('src/**/*.js')
        .pipe(babel({
            plugins: ['@babel/plugin-transform-runtime']
        }))
        .pipe(gulp.dest('dist'))
);

Custom Plugin Configuration:

gulp.task('babel', () =>
    gulp.src('src/**/*.js')
        .pipe(babel({
            plugins: [
                '@babel/plugin-transform-arrow-functions',
                '@babel/plugin-transform-block-scoping'
            ]
        }))
        .pipe(gulp.dest('dist'))
);