Skip to content

babel/gulp-babel

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.15...4.17.19)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
46db7ee

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
July 30, 2015 17:36
September 30, 2014 13:10
January 26, 2018 22:56
October 8, 2019 20:22
January 26, 2018 22:56
February 5, 2019 13:32

This readme is for gulp-babel v8 + Babel v7 Check the 7.x branch for docs with Babel v6 usage

gulp-babel npm Build Status

Use next generation JavaScript, today, with Babel

Issues with the output should be reported on the Babel issue tracker.

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

Usage

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

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

API

babel([options])

options

See the Babel options, except for sourceMaps and filename which is handled for you. Also, keep in mind that options will be loaded from config files that apply to each file.

Source Maps

Use gulp-sourcemaps like this:

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

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

Babel Metadata

Files in the stream are annotated with a babel property, which contains the metadata from babel.transform().

Example

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.test); // 'metadata'
		cb(null, file);
	});
}

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

Runtime

If you're attempting to use features such as generators, you'll need to add transform-runtime as a plugin, to include the Babel runtime. Otherwise, you'll receive the error: regeneratorRuntime is not defined.

Install the runtime:

$ npm install --save-dev @babel/plugin-transform-runtime
$ npm install --save @babel/runtime

Use it as plugin:

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

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

License

MIT © Sindre Sorhus