gulp-esbuild

gulp-esbuild

A gulp plugin for the esbuild bundler.

There are 2 available exports: gulpEsbuild and createGulpEsbuild. In most cases, you should use the gulpEsbuild export. Use the createGulpEsbuild export if you want to enable esbuild's incremental build.

esbuild's incremental build is used together with gulp's watch API and allows you to rebuild only the changed parts of the code (example).

Installation

npm install gulp-esbuild esbuild gulp

or

yarn add gulp-esbuild esbuild

Examples

Build example

gulpfile.js

const { src, dest } = require('gulp');
const { gulpEsbuild } = require('gulp-esbuild');

function build() {
	return src('./index.tsx')
		.pipe(
			gulpEsbuild({
				entryPoints: ['index.tsx'],
				outfile: 'bundle.js',
				bundle: true,
				loader: {
					'.tsx': 'tsx',
				},
			}),
		)
		.pipe(dest('./dist'));
}

exports.build = build;

package.json

...
"scripts": {
    "build": "gulp build"
}
...

command line

npm run build

Watch mode example

gulpfile.js

const { src, dest, watch } = require('gulp');
const { createGulpEsbuild } = require('gulp-esbuild');
const gulpEsbuild = createGulpEsbuild({ incremental: true });

function build() {
	return src('./src/index.js')
		.pipe(
			gulpEsbuild({
				entryPoints: ['src/index.js'],
				outfile: 'outfile.js',
				bundle: true,
			}),
		)
		.pipe(dest('./dist'));
}

function watchTask() {
	watch('./src/index.js', build);
}

exports.watch = watchTask;

package.json

...
"scripts": {
    "watch": "gulp watch"
}
...

command line

npm run watch

More examples here

Plugin arguments

Name	Type	Default
entryPoints	array|object
sourcemap	boolean|'linked'|'inline'|'external'|'both'
sourceRoot	string
sourcesContent	boolean
legalComments	'none'|'inline'|'eof'|'linked'|'external'
format	'iife'|'cjs'|'esm'
globalName	string
target	string|array
supported	object
mangleProps	RegExp
reserveProps	RegExp
mangleQuoted	boolean
mangleCache	object
drop	array
dropLabels	array
minify	boolean
minifyWhitespace	boolean
minifyIdentifiers	boolean
minifySyntax	boolean
lineLimit	number
charset	'ascii'|'utf8'
treeShaking	boolean
ignoreAnnotations	boolean
jsx	'transform'|'preserve'|'automatic'
jsxFactory	string
jsxFragment	string
jsxImportSource	string
jsxDev	boolean
jsxSideEffects	boolean
define	object
pure	array
keepNames	boolean
absPaths	array
banner	object
footer	object
color	boolean
logLevel	'verbose'|'debug'|'info'|'warning'|'error'|'silent'	'silent'
logLimit	number
logOverride	object
tsconfigRaw	string|object
bundle	boolean
splitting	boolean
preserveSymlinks	boolean
outfile	string
metafile	boolean
metafileName	string	'metafile.json'
outdir	string
outbase	string
platform	'browser'|'node'|'neutral'
external	array
packages	'bundle'|'external'
alias	object
loader	object
resolveExtensions	array	['.tsx', '.ts', '.jsx', '.js', '.css', '.json']
mainFields	array
conditions	array
nodePaths	array
tsconfig	string
outExtension	object
publicPath	string
entryNames	string
chunkNames	string
assetNames	string
inject	array
plugins	array