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