/aspnext

asp5. gulp. es6

Primary LanguageJavaScript

Table of Content

ENVIROMENT

1. Git

Install git command line tools git

2. Node.js

Install globally gulp, jspm, tsd. Run command npm install -g gulp jspm tsd

3. C#

1. Install VS 2015 with latest patches. 
2. Update to latest RC release of asp.net 5 using dnvm in console `dnvm upgrade`. 
   Version should be '1.0.0-rc1-update1'

UI DEVELOPMENT

We are using Typescript and Angular 2. For build purposes we are using Gulp and SystemJs with JSPM package manager

Running Gulp Tasks

Tasks should be run in console via gulp $$$$$ where $$$$$ is name of command.

Core Tasks

gulpfile.js contains all core tasks. These are some of them:

  • watch:dev - runs watch task that monitores typescript and styles files in application folder. task will recompile those on change.
  • compile:dev - single run of compilation for typescript and styles files for dev enviroment. Does not bundles or inliness any of source file. Does not rebuilds theme.
  • recompile:dev - runs same as compile:dev and cleans all dev folders before run. Refer to clean:dev task
  • compile - runs compilation of application and theme files as well.
  • recompile -runs same as compile task and cleans all before run. Refer to _'clean' task
  • production - cleans compilation file. Rebuilds all styles: theme and app styles. Inlines all app source files, bundles and minifies into sinle file that is published into destination folder.

Clean

clean.js contains following tasks:

  • clean - cleans everything. Runs clean:dev, clean:styles, clean:prod, clean:tests.
  • clean:appstyles - task to clean all style files (*.css and *.map.css ) from source( app) folder
  • clean:theme - task to clean all compiled theme styles (*.css and *.map.css ) from 'assets' folder
  • clean:styles - cleans compiled styles. Runs clean:theme and clean:appstyles
  • clean:ts - task to clean all dev build files (*js and *.map.js) from source( app) folder
  • clean:dev - cleans all compiled files from source folder. Runs clean:ts and clean:appstyles
  • clean:prod - taks to clean all from distrubution folder (dist)
  • clean:tests - taks to clean all from test folder

Compile App

Typescript code compilation is not required during development process. compile.js contains following tasks:

  • compile:ts - taks to compile all .ts files into .js. Also generates map files. This taks is not required for Development code run. Use it only if you suspect that .ts issues or to check if application is able to generate correct .js from your files. However you might want to run this one to do quality check for your code. Taks will show you all linting and typescript errors found.
  • watch:ts - watch task for typescript files. Will recompile, check linting, report errors for all typescript files on fly. Useful for development*
  • compile:inline - taks is inlining all Angular 2 components templates and styles and creates .js files for them. Task is essential part of production flow*
  • compile:tests - runs compilation of all files into test folder. Part of unit test process.

Code Quality

App is using tslint to run checks on code quality of Typescript files. Best way to check all your .ts code is to run watch:ts and fix any errors. linter.js contains following task:

  • lint:ts - task that peforms single check of .ts files and report to console. If errors appear you will also hear bip message
  • watch:lint:ts - task that starts a watcher on .ts files and runs lint:ts on every save of any files. Useful for development.

Build for Production

Code build and Production compilation are performed using SystemJs Builder with use of jspm.config.js (see below). Source code of builder task is located in build.js:

  • build:bundle - creating SFX (Static) bundle of application.

App will switch to bundled files based on ASPNET_ENV Environment varieble. Files included for each environment are configured in _layout.cshtm file. More on this Asp.net 5 Multiple Envornments.

To test locally you can either change local env varieble or run app using dnx web-prod for Production or dnx web-dev for Development.

Note that for Production you will need to build bundles first by running production task.

Asp.Net publishing tool (dnu) will run production task automatically as prepublish step. More on that Asp.net 5 Deployment

Build Documentation

App can generate help documentation for Typescript files using TypeDoc. Source code in located in docs.js. This files is generated with it's help as well.

  • build:docs - rebuilds Typescript documentation
  • serve:docs - starts static server that can serve documentation. Typically serves from localhost:3000

CONFIGURATION

Asp.net 5 configuration respects ASPNET_ENV Environment varieble

  • project.json - ASP specific config
  • appsetttings.json - Application config

Client and build system configuration