All Projects → babel → Gulp Babel

babel / Gulp Babel

Licence: mit
Gulp plugin for Babel

Programming Languages

javascript
137047 projects - #8 most used programming language

Projects that are alternatives of or similar to Gulp Babel

Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-89.58%)
Mutual labels:  gulp-plugin, babel
Gulp Ngmin
[DEPRECATED] Pre-minify AngularJS apps with ngmin
Stars: ✭ 89 (-93.18%)
Mutual labels:  gulp-plugin
Hactar
The solution to JavaScript Fatigue. Zero config dev
Stars: ✭ 82 (-93.72%)
Mutual labels:  babel
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-93.41%)
Mutual labels:  babel
Catom
A 0 runtime CSS in JS library
Stars: ✭ 84 (-93.56%)
Mutual labels:  babel
Babel Upgrade
⬆️ A tool for upgrading Babel versions (to v7): `npx babel-upgrade`
Stars: ✭ 1,285 (-1.53%)
Mutual labels:  babel
Spa Starter Kit
📦 Quick starter kit for booting up a NodeJS container with React, webpack, babel/ES2015, Redux, and more.
Stars: ✭ 81 (-93.79%)
Mutual labels:  babel
Awesome Coding Javascript
📌 持续构建个人的源码库(JavaScript 原生、常用库、数据结构、算法)
Stars: ✭ 88 (-93.26%)
Mutual labels:  babel
Forge Node App
🛠📦🎉 Generate Node.js boilerplate with optional libraries & tools
Stars: ✭ 90 (-93.1%)
Mutual labels:  babel
Modify Babel Preset
💫 Create a modified babel preset based on an an existing preset.
Stars: ✭ 85 (-93.49%)
Mutual labels:  babel
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: ✭ 1,235 (-5.36%)
Mutual labels:  babel
Esbuild Loader
⚡️ Speed up your Webpack build with esbuild
Stars: ✭ 1,245 (-4.6%)
Mutual labels:  babel
React Boilerplate
This project is deprecated. Please use CRA instead.
Stars: ✭ 88 (-93.26%)
Mutual labels:  babel
Tkframework
react + relay + redux + saga + graphql + webpack
Stars: ✭ 83 (-93.64%)
Mutual labels:  babel
Idx.macro
a 'babel-macros' version of 'babel-plugin-idx'
Stars: ✭ 90 (-93.1%)
Mutual labels:  babel
Node Developer Boilerplate
🍭 Boilerplate for ES6+ Node.js and npm Developer
Stars: ✭ 82 (-93.72%)
Mutual labels:  babel
Svelte Example
🚀 📚 Some examples to test the Svelte Framework
Stars: ✭ 85 (-93.49%)
Mutual labels:  babel
Cookiecutter Webpack
Boilerplate for webpack 2, babel, react + redux + hmr, and karma. Can be inserted into existing django projects.
Stars: ✭ 87 (-93.33%)
Mutual labels:  babel
Jsx Control Statements
Neater If and For for React JSX
Stars: ✭ 1,305 (+0%)
Mutual labels:  babel
Award
⚙基于react的服务端渲染框架
Stars: ✭ 91 (-93.03%)
Mutual labels:  babel

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 [email protected] 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]