Gulp Tasks

You can find all the task in config/gulp/tasks folder for more detail.

Table of content

• Serve
• SASS
• TypeScript
• Test
• Build
• Clean

Serve

gulp or gulp serve-dev

Serve the application in development mode

• Compile all *.ts files
• Start live-server, open up a browser, and watch for file changes
• If *.ts file is changed, it'll recompile and refresh your browser.

gulp serve-build

Serve the application in production mode

• It'll cleanup previous build folder
• Compile all *.ts
• Run SystemJS Builder/Webpack to bundle the app/main.js into build/app/bundle.js and uglify it
• Copy fonts in node modules to build folder
• Remove unused script reference since it's already bundled in build/app/boot.js
• Copy all *.html in app folder, then start live-server.

SASS

gulp sass

Compile main.scss file in assets/styles folder, you can add new *.scss file and import them in main.scss

gulp watch-sass

Watch all SASS files *.scss in assets/styles folder, the changed file will be recompiled

TypeScript

All compilation will:

• generate sourcemaps using gulp-sourcemaps
• trigger tslint and won't compile if it's failed (unless you're using gulp watch-ts)

gulp tsc

Run all TSC tasks.

gulp watch-ts

Watch all TypeScript files, the changed file will be recompiled

Warning! The watch process may get killed if compilation fails, but it won't be killed if tslint fails but will report the errors.

gulp tsc-app

Compile all TypeScript files in app folder (except *.spec.ts files)

gulp tsc-unit

Compile all TypeScript spec files in app folder and test-helper folder

gulp tsc-e2e

Compile all TypeScript spec files in test/e2e folder and test-helper folder

gulp tslint

Run all tslint tasks.

gulp tslint-app

Lint all TypeScript files in app folder (except *.spec.ts files)

gulp tslint-unit

Lint all TypeScript spec files in app folder and test-helper folder

gulp tslint-e2e

Lint all TypeScript spec files in test/e2e folder and test-helper folder

Test

gulp test

add -w or --watch option for testing with watch mode

Default to call gulp unit-test but does clean-report before that.

gulp unit-test

Run the unit test task:

1. Lint and Compile all typescripts
2. Start Karma server
3. Generate JSON for remap (the coverage is still in transpiled Javacript, so we need to remap it back to TypeScript)
4. Remap the coverage using remap-istanbul and produces:

• HTML report
• LCOV.info
• JSON The coverage has been transformed into TypeScript

Build

gulp build

Default to call gulp build-systemjs but run the testing before that. Same as gulp serve-build but only create the bundle, no serving

gulp env

Generate src/app/shared/constant/env.ts file from env.json. More details here.

gulp build-assets

Prepare assets optimization. Get called by gulp build.

By default, the starter uses SystemJS extension to bundle your app. You can swap to Webpack extension if you like it better.

Clean

gulp clean

Run all cleaning tasks.

gulp clean-build

Clean build folder generated by running build task

gulp clean-report

Clean report folder generated by running test task

gulp clean-sass

Clean generated *.css file in assets/styles folder

gulp clean-ts

Run all cleaning TS tasks

gulp clean-ts-app

Clean only all compiled TS in app folder

gulp clean-ts-test

Clean only all compiled spec TS and in app, src/test/e2e, and src/test/test-helpers folder