Building TypeScript with Gulp

In the preceding post I show how you can build your TypeScript with Tsc, you can also simply use Visual Studio and use the option: “Compile TypeScipt on Build” in the Build properties of your ASP.NET Core project. While these are valid options I generally prefer to use Gulp to setup my own workflow. 

In this post I’ll explain how you can use Gulp to setup and fine tune your Typescript build.

Pull Gulp npm packages

First will need to use npm to pull down some gulp packages that will help us in setting up our Typescript build.

The npm packages we need are:

"gulp-rimraf": "^0.2.0",

"gulp-sourcemaps": "^1.6.0",

"gulp-typescript": "^2.13.4",

"gulp-uglify": "1.2.0",

"rimraf": "2.2.8"

 

To install these packages you can copy paste the list here above right under the “devDependencies” of the package.json file but I prefer to use npm.

Navigate to the root of your project and use the command:

c:\Dev\MyClub\web>npm install [packagename] --save-dev

The --save-dev option is used to update our packages.json and put the new dependencies under the “devDependencies”.

Create the Gulp Tasks

Here we’ll use gulp-typescript to compile automate the typescript build. The documentation can be found here. Open the gulpfile.js and modify as follows:

  • Require the following packages:
  • Add following path variables
  • As we’ll use the tsconfig.json file to set the build properties we’ll create a project:
  • Write the typescript build task
  • Write the clean tasks
  • If you use VS2015 you can bind the gulp tasks with your VS build. The clean tasks should run before our build and after our build we should run first the ‘tsbuilld’ and then the ‘min’ task.

 

 

  • If you want that the ts build is triggered when a ts file changes write a watch task:

 

  • If needed modify your angular script links. As the predefined min:js gulp task mimifies all js files we can choose to use the mimified app.js file in production.

 

Now every time you compile your project or save a typescript file the ts compiler should build your javascript files.

Add comment