gulp-esbuild

A gulp plugin for the esbuild bundler.

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

• the esbuild's incremental build is used with the gulp's watching files API and allows you to rebuild only changed parts of code (example);
• piping allows you to receive data from other plugins via stream piping (example).

const {createGulpEsbuild} = require('gulp-esbuild')
const gulpEsbuild = createGulpEsbuild({
	incremental: true, // enables the esbuild's incremental build
	piping: true,      // enables piping
})

Notice: ⚠️ piping is disabled by default ⚠️

Installation

npm install gulp-esbuild

or

yarn add gulp-esbuild

Examples

build example

gulpfile.js

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

function build() {
    return src('./index.tsx')
        .pipe(gulpEsbuild({
            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({
            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
sourcemap	boolean|'linked'|'inline'|'external'|'both'
sourceRoot	string
sourcesContent	boolean
legalComments	'none'|'inline'|'eof'|'linked'|'external'
format	'iife'|'cjs'|'esm'
globalName	string
target	string
supported	object
mangleProps	RegExp
reserveProps	RegExp
mangleQuoted	boolean
mangleCache	object
drop	'console'|'debugger'
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
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	'external'
alias	object
loader	object
resolveExtensions	array
mainFields	array
conditions	array
tsconfig	string
outExtension	object
publicPath	string
entryNames	string
chunkNames	string
assetNames	string
inject	array
plugins	array