1 | > This readme is for gulp-babel v8 + Babel v7
|
2 | > Check the [7.x branch](https://github.com/babel/gulp-babel/tree/v7-maintenance) for docs with Babel v6 usage
|
3 |
|
4 | # gulp-babel [![npm](https://img.shields.io/npm/v/gulp-babel.svg?maxAge=2592000)](https://www.npmjs.com/package/gulp-babel) [![Build Status](https://travis-ci.org/babel/gulp-babel.svg?branch=master)](https://travis-ci.org/babel/gulp-babel)
|
5 |
|
6 | > Use next generation JavaScript, today, with [Babel](https://babeljs.io)
|
7 |
|
8 | *Issues with the output should be reported on the Babel [issue tracker](https://phabricator.babeljs.io/).*
|
9 |
|
10 |
|
11 | ## Install
|
12 |
|
13 | Install `gulp-babel` if you want to get the pre-release of the next version of `gulp-babel`.
|
14 |
|
15 | ```
|
16 | # Babel 7
|
17 | $ npm install --save-dev gulp-babel @babel/core @babel/preset-env
|
18 |
|
19 | # Babel 6
|
20 | $ npm install --save-dev gulp-babel@7 babel-core babel-preset-env
|
21 | ```
|
22 |
|
23 | ## Usage
|
24 |
|
25 | ```js
|
26 | const gulp = require('gulp');
|
27 | const babel = require('gulp-babel');
|
28 |
|
29 | gulp.task('default', () =>
|
30 | gulp.src('src/app.js')
|
31 | .pipe(babel({
|
32 | presets: ['@babel/env']
|
33 | }))
|
34 | .pipe(gulp.dest('dist'))
|
35 | );
|
36 | ```
|
37 |
|
38 |
|
39 | ## API
|
40 |
|
41 | ### babel([options])
|
42 |
|
43 | #### options
|
44 |
|
45 | See the Babel [options](https://babeljs.io/docs/usage/options/), except for `sourceMap` and `filename` which is handled for you.
|
46 |
|
47 |
|
48 | ## Source Maps
|
49 |
|
50 | Use [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) like this:
|
51 |
|
52 | ```js
|
53 | const gulp = require('gulp');
|
54 | const sourcemaps = require('gulp-sourcemaps');
|
55 | const babel = require('gulp-babel');
|
56 | const concat = require('gulp-concat');
|
57 |
|
58 | gulp.task('default', () =>
|
59 | gulp.src('src/**/*.js')
|
60 | .pipe(sourcemaps.init())
|
61 | .pipe(babel({
|
62 | presets: ['@babel/env']
|
63 | }))
|
64 | .pipe(concat('all.js'))
|
65 | .pipe(sourcemaps.write('.'))
|
66 | .pipe(gulp.dest('dist'))
|
67 | );
|
68 | ```
|
69 |
|
70 |
|
71 | ## Babel Metadata
|
72 |
|
73 | Files in the stream are annotated with a `babel` property, which contains the metadata from [`babel.transform()`](https://babeljs.io/docs/usage/api/).
|
74 |
|
75 | #### Example
|
76 |
|
77 | ```js
|
78 | const gulp = require('gulp');
|
79 | const babel = require('gulp-babel');
|
80 | const through = require('through2');
|
81 |
|
82 | function logBabelMetadata() {
|
83 | return through.obj((file, enc, cb) => {
|
84 | console.log(file.babel.test); // 'metadata'
|
85 | cb(null, file);
|
86 | });
|
87 | }
|
88 |
|
89 | gulp.task('default', () =>
|
90 | gulp.src('src/**/*.js')
|
91 | .pipe(babel({
|
92 | // plugin that sets some metadata
|
93 | plugins: [{
|
94 | post(file) {
|
95 | file.metadata.test = 'metadata';
|
96 | }
|
97 | }]
|
98 | }))
|
99 | .pipe(logBabelMetadata())
|
100 | )
|
101 | ```
|
102 |
|
103 |
|
104 | ## Runtime
|
105 |
|
106 | 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`.
|
107 |
|
108 | Install the runtime:
|
109 |
|
110 | ```
|
111 | $ npm install --save-dev @babel/plugin-transform-runtime
|
112 | $ npm install --save @babel/runtime
|
113 | ```
|
114 |
|
115 | Use it as plugin:
|
116 |
|
117 | ```js
|
118 | const gulp = require('gulp');
|
119 | const babel = require('gulp-babel');
|
120 |
|
121 | gulp.task('default', () =>
|
122 | gulp.src('src/app.js')
|
123 | .pipe(babel({
|
124 | plugins: ['@babel/transform-runtime']
|
125 | }))
|
126 | .pipe(gulp.dest('dist'))
|
127 | );
|
128 | ```
|
129 |
|
130 |
|
131 | ## License
|
132 |
|
133 | MIT © [Sindre Sorhus](http://sindresorhus.com)
|