gulp-esbuild

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. 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);

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

⚠️ Notice ⚠️

Esbuild doesn't fully support working with the virtual files which gulp send when you use: src(...).pipe(gulpEsbuild(...)). We found workaround using some tricks, but one limitation still remains. Every file you send via src(...) must exist in the file system. Its contents are not important, since they will be taken from the virtual file. But existence in the file system is required.

Installation

npm install gulp-esbuild esbuild

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