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:
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:
- Require the 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.
- Write a watch task if you want that the ts build is triggered when a ts file changes.
- 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.