Compile TypeScript and Package with Browserify in a Single Gulp Task

Published 25/04/2016 - Updated 28/07/2023

A profile picture of Gary Lewis Cheetham, the author of this article

Written by

Gary Lewis Cheetham

Automotive marketing specialist from Manchester, UK

Table of Contents [Show]

OK – the topic of packaging your js with browserify using Gulp has been done to death. However, integrating TypeScript into this workflow can be a little bit of a challenge because browserify doesn’t take a regular gulp file stream as input.


Just want to copy and paste some code and get on with your life? Here’s the task that I ended up writing:

var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var tsify = require('tsify');

gulp.task('build:ts', function () {
    return browserify()
        .on('error', function (error) { console.error(error.toString()); })

This method relies on a few plugins: tsify, vinyl-buffer, and vinyl-source-stream.


If you’re keen-eyed (or didn’t install the dependencies after you copy and pasted the code) you’ll spot the three things of interest in this gulp task: tsify, buffer(), and source().


The TypeScript gets compiled in this recipe using a browserify transform. Transforms allow you to hook into the browserify packaging process, in this case to compile TypeScript. Luckily, there exists a pre-written TypeScript transform for browserify called tsify.


Gulp can perform operations on special types of node streams called vinyl file streams. Essentially, vinyl is a format for describing files (more info here). However, browserify().bundle() returns a regular text-based node stream. vinyl-source-stream takes one of these conventional node text streams and returns a vinyl file stream (that gulp can deal with).


Technically, in this task, vinyl-buffer isn’t needed. However, if you’d like to pipe your browserified stream into another pipe such as uglify() you’ll need to run it through this vinyl-buffer first. Otherwise, you’ll find yourself at the mercy of an unhandled error.

Expert advice

You're reading the GL Digital blog, where auto marketing experts share proven tactics to grow your dealership.

Struggling to make good video?

Sometimes it feels like posting on TikTok is a waste of time.

Build a powerful local brand and watch customers roll in from TikTok.

About the author

A profile picture of Gary Lewis Cheetham, the founder of GL Digital Automotive Marketing, smiling outside a car dealership

Gary Lewis Cheetham is an automotive marketing specialist, born and raised in Oldham, Greater Manchester. Gary Lewis Cheetham is the founder of GL Digital Automotive Marketing. He spent his teenage years working at the family dealership after school, learning the ropes of the car trade from the inside out.

After moving on to working in marketing, Gary Lewis founded GL Digital in 2020 when he noticed a need for direct-to-consumer marketing platforms within the auto industry. He now strives every day to help independent dealers in the UK and US realise their potential. Gary also loves Formula 1 and motorsport.