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 | |