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