Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/babel/gulp-babel
Gulp plugin for Babel
https://github.com/babel/gulp-babel
babel gulp-plugin
Last synced: 1 day ago
JSON representation
Gulp plugin for Babel
- Host: GitHub
- URL: https://github.com/babel/gulp-babel
- Owner: babel
- License: mit
- Created: 2014-09-30T11:11:00.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:48:59.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T15:14:02.304Z (about 1 month ago)
- Topics: babel, gulp-plugin
- Language: JavaScript
- Homepage: https://babeljs.io
- Size: 984 KB
- Stars: 1,320
- Watchers: 36
- Forks: 120
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- es6-tools - gulp-babel
README
> This readme is for gulp-babel v8 + Babel v7
> Check the [7.x branch](https://github.com/babel/gulp-babel/tree/v7-maintenance) for docs with Babel v6 usage
# gulp-babel [](https://www.npmjs.com/package/gulp-babel) [](https://travis-ci.org/babel/gulp-babel)
> Use next generation JavaScript, today, with [Babel](https://babeljs.io)
*Issues with the output should be reported on the Babel [issue tracker](https://phabricator.babeljs.io/).*
## 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
```js
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](http://babeljs.io/docs/en/options), except for `sourceMaps` and `filename` which is handled for you. Also, keep in mind that options will be loaded from [config files](http://babeljs.io/docs/en/config-files) that apply to each file.
## Source Maps
Use [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) like this:
```js
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()`](https://babeljs.io/docs/usage/api/).
#### Example
```js
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:
```js
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](http://sindresorhus.com)