25/04/2016 - 1 minute read

Compile TypeScript and Package with Browserify in a Single Gulp Task

Written by

Gary Lewis Cheetham

Automotive marketing specialist from Manchester, UK

OK - the topic of packaging your js with browserify using Gulp has been donetodeath. 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.

tldr;

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()
        .add('./my-app/App.ts')
        .plugin(tsify)
        .bundle()
        .on('error', function (error) { console.error(error.toString()); })
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./ReviewForm/'));
});

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

Explanation

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

tsify

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.

vinyl-source-stream

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

vinyl-buffer

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.

About the author

Gary Lewis Cheetham is an automotive marketing specialist, born and raised in Oldham, Greater Manchester. 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.

More Articles

SEO For Car Dealerships: Everything You Need to Know

SEO For Car Dealerships: Everything You Need to Know

We will be the first to say it: SEO for car dealerships is officially over in 2022. Car dealers fail at SEO time and time again, because…

5 minute read - 07/02/2022

Everything you need to know about Conversion Rate Optimisation for Car dealerships in 2022

Everything you need to know about Conversion Rate Optimisation for Car dealerships in 2022

This article will cover how dealerships can do conversion rate optimisation on their website and sales funnels, including for lead…

6 minute read - 27/01/2022

How to run successful Email Marketing for Car Dealerships in 2022

How to run successful Email Marketing for Car Dealerships in 2022

Email marketing is one of the most effective digital marketing strategies for car dealerships to build relationships with customers. It…

5 minute read - 27/01/2022

See More