Asp.Net Core: Building TypeScript with Gulp

In the preceding post I show how you can compile your TypeScript files with tsc. You can also simply use Visual Studio and enable 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 a Typescript build.

The code is available at: https://github.com/geobarteam/myClub/tree/1-3.Build.TypeScript.With.Gulp

$ git pull https://github.com/geobarteam/myClub.git 1-3.Build.TypeScript.With.Gulp

A) Pull the Gulp packages

First we’ll 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”

gulpfiles1

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.
To install these packages through npm, first navigate to the root of your project and use the command:
$ npm install [packagename] –save-dev
The –save-dev option is used to update our packages.json and put the new dependencies under the “devDependencies”.

B) 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:

  1. Require the packages
    [snippet id=”221″]
  2. Add following path variables
    [snippet id=”231″]
  3. As we’ll use the tsconfig.json file to set the build properties we’ll create a project:
    [snippet id=”241″]
  4. Write the typescript build task
    [snippet id=”251″]
  5. Write the clean tasks
    [snippet id=”261″]
  6. 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.
    gulpfiles2gulpfiles3
  7. Write a watch task if you want that the ts build is triggered when a ts file changes.
    [snippet id=”271″]
  8. If needed, modify your angular script links. As the predefined min:js gulp task minifies all js files we can choose to use the minified app.js file in production.
    [snippet id=”281″]

Leave a Reply