refactor: build process (#117)

* Refactors the build process to use the TS compiler directly for proper source maps.
* Uses NGC to output the necessary metadata files.
* Fixes errors when compiling the module with AoT.
* Reverts the build process to use ES6 instead of TS.
* Cleans up the dependencies.

Author: crisbeto

README.md

@@ -77,7 +77,7 @@ from the defaults.
 
 ```typescript
 import {NgModule} from '@angular/core';
-import {RoundProgressModule, RoundProgressConfig} from 'round-progress';
+import {RoundProgressModule, RoundProgressConfig} from 'angular-svg-round-progressbar';
 
 @NgModule({
   imports: [RoundProgressModule]

demo/demo.css

@@ -2,12 +2,12 @@
   box-sizing: border-box;
 }
 
-body{
+body {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background: #fafafa;
 }
 
-h2{
+h2 {
   margin: 0 0 40px;
 }
 
@@ -21,13 +21,13 @@ h2{
   clear: both;
 }
 
-.progress-wrapper{
+.progress-wrapper {
   position: relative;
   margin: 20px auto;
   font-size: 40px;
 }
 
-.current{
+.current {
   position: absolute;
   color: #bbb;
   font-weight: 100;
@@ -38,7 +38,7 @@ round-progress {
   margin: auto;
 }
 
-.container{
+.container {
   width: 100%;
   max-width: 650px;
   margin: 40px auto 80px;
@@ -49,7 +49,7 @@ round-progress {
   border-radius: 4px;
 }
 
-button{
+button {
   display: inline-block;
   padding: 10px 20px;
   background: #45ccce;
@@ -62,40 +62,36 @@ button{
   margin: 0 5px 5px 0;
 }
 
-form{
+form {
   text-align: left;
   max-width: 350px;
   margin: 30px auto;
 }
 
-form > div{
+form > div {
   margin-bottom: 15px;
 }
 
-input, select{
+input, select {
   float: right;
   padding: 5px;
   width: 150px;
 }
 
-input[type='checkbox']{
+input[type='checkbox'] {
   width: auto;
 }
 
-input[type='color']{
+input[type='color'] {
   height: 30px;
 }
 
-.back{
+.back {
   position: fixed;
   top: 5px;
   right: 5px;
 }
 
-.ng-cloak{
-  display: none;
-}
-
 .loading {
   position: fixed;
   top: 50%;
@@ -107,7 +103,7 @@ input[type='color']{
   color: #bbb;
 }
 
-@media(max-width: 650px){
+@media (max-width: 650px) {
   body {
     padding: 12.5px;
   }

demo/src/main.ts

@@ -1,5 +1,4 @@
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {DemoModule} from './demo.module';
 
-const platform = platformBrowserDynamic();
-platform.bootstrapModule(DemoModule);
+platformBrowserDynamic().bootstrapModule(DemoModule);

demo/tsconfig.json

@@ -11,6 +11,7 @@
     "target": "es5",
     "stripInternal": true,
     "baseUrl": ".",
+    "outDir": "./dist",
     "paths": {
       "round-progress": [
         "./round-progress"

gulp/constants.js

@@ -0,0 +1,6 @@
+module.exports = {
+  SRC: './src',
+  DIST: './dist',
+  DEMO: './demo/',
+  DEMO_DIST: './demo/round-progress'
+}

gulp/constants.ts

@@ -0,0 +1,39 @@
+const gulp = require('gulp');
+const path = require('path');
+const ghPages = require('gulp-gh-pages');
+const runSequence = require('run-sequence');
+
+const DEMO = require('./constants').DEMO;
+const clean = require('./tasks/clean');
+const server = require('./tasks/server');
+const copy = require('./tasks/copy');
+const compile = require('./tasks/compile');
+
+gulp.task('demo:clean', clean(path.join(DEMO, '{vendor,dist}')));
+gulp.task('demo:server', server(DEMO));
+gulp.task('demo:gh-pages', () => gulp.src(path.join(DEMO, '**/*')).pipe(ghPages()));
+gulp.task('demo:ts', compile.tsc(DEMO));
+
+gulp.task('demo:assets', copy(
+ 'node_modules',
+ path.join(DEMO, 'vendor'),
+ [
+  '@angular/**/*.umd.js',
+  'core-js/client/*.min.+(js|js.map)',
+  'rxjs/**/*.+(js|js.map)',
+  'systemjs/dist/*.js',
+  'zone.js/dist/*.js'
+ ]
+));
+
+gulp.task('demo:build', done => {
+  runSequence('demo:clean', 'demo:assets', 'demo:ts', done);
+});
+
+gulp.task('demo:watch', () => {
+  gulp.watch(path.join(DEMO, 'src/**/*.ts'), ['demo:ts']);
+});
+
+gulp.task('demo:deploy', done => {
+  runSequence('demo:build', 'demo:gh-pages', done);
+});

gulp/demo.js

@@ -0,0 +1,33 @@
+const gulp = require('gulp');
+const path = require('path');
+const runSequence = require('run-sequence');
+
+const compile = require('./tasks/compile');
+const clean = require('./tasks/clean');
+const constants = require('./constants');
+
+gulp.task('module:clean', clean(constants.DIST));
+gulp.task('module:ts:tsc', compile.tsc(constants.SRC));
+gulp.task('module:ts:ngc', compile.ngc(constants.SRC));
+gulp.task('module:ts', ['module:ts:tsc', 'module:ts:ngc']);
+
+gulp.task('module:ts:demo', compile.tsc(constants.SRC, {
+  '--outDir': constants.DEMO_DIST
+}));
+
+gulp.task('module:ts:umd', compile.tsc(constants.SRC, {
+  '--outFile': path.join(constants.DIST, 'round-progress.umd.js'),
+  '--module': 'system'
+}));
+
+gulp.task('module:watch', () => {
+  gulp.watch(path.join(constants.SRC, '**/*.ts'), ['module:ts:demo']);
+});
+
+gulp.task('module:build', done => {
+  runSequence('module:clean', 'module:ts', 'module:ts:umd', done);
+});
+
+gulp.task('deploy', done => {
+  runSequence('module:build', 'demo:deploy', done);
+});