Support for html and css in separate files

.gitignore

@@ -23,3 +23,4 @@ jspm_packages
 
 /dist
 /demo/build
+.tmp

build/paths.js

@@ -1,6 +1,9 @@
 module.exports = {
   source: 'lib/**/*.js',
+  html: 'lib/**/*.html',
+  css: 'lib/**/*.css',
   sourceEntryPoint: 'lib/index.js',
-  outputFolder: 'dist/',
+  output: 'dist/',
+  tmp: '.tmp/',
   demo: 'demo/**/*'
 };

build/tasks/build.js

@@ -1,25 +1,33 @@
 var gulp = require('gulp');
 var runSequence = require('run-sequence');
 var Builder = require('systemjs-builder');
+var inlineNg2Template = require('gulp-inline-ng2-template');
 var path = require('path');
 
 var paths = require('../paths');
+var fs= require('fs');
 
 gulp.task('build', function (callback) {
   return runSequence(
     'clean',
-    ['bundle'],
+    'bundleSfx',
     callback
   );
 });
 
-gulp.task('bundle', function(cb) {
+gulp.task('inlineTemplates', function() {
+  return gulp.src(paths.source, { base: './' })
+    .pipe(inlineNg2Template({ base: '/' }))
+    .pipe(gulp.dest(paths.tmp));
+});
+
+gulp.task('bundleSfx', ['inlineTemplates'], function(cb) {
   var builder = new Builder('./', 'system.config.js');
   builder
-    .buildStatic(paths.sourceEntryPoint, path.join(paths.outputFolder, 'redoc.full.js'),
+    .buildStatic(path.join(paths.tmp, paths.sourceEntryPoint),
+      path.join(paths.output, 'redoc.full.js'),
       { globalName: 'Redoc' })
     .then(function() {
-      console.log('Bundle complete');
       cb();
     })
     .catch(function(err) {

build/tasks/clean.js

@@ -4,6 +4,6 @@ var del = require('del');
 var vinylPaths = require('vinyl-paths');
 
 gulp.task('clean', function () {
-  return gulp.src([paths.outputFolder])
+  return gulp.src([paths.output, paths.tmp])
     .pipe(vinylPaths(del));
 });

build/tasks/watch.js

@@ -7,6 +7,8 @@ function changed(event) {
 }
 
 gulp.task('watch', ['build'], function () {
-  gulp.watch([ paths.source ], [ 'bundle', browserSync.reload ]).on('change', changed);
+  gulp.watch([ paths.source ], [ 'bundleSfx', browserSync.reload ]).on('change', changed);
+  gulp.watch([ paths.html ], [ 'bundleSfx', browserSync.reload]).on('change', changed);
+  gulp.watch([ paths.css ], [ 'bundleSfx', browserSync.reload]).on('change', changed);
   gulp.watch([ paths.demo ], [ '', browserSync.reload ]).on('change', changed);
 });

lib/RedocTest/redoc-test.css

@@ -0,0 +1,3 @@
+h1 strong {
+  color: #1976D3;
+}

lib/RedocTest/redoc-test.html

@@ -0,0 +1 @@
+<h1>Hello <strong>{{ name }}</strong>!</h1>

lib/RedocTest/redoc-test.js

@@ -1,7 +1,10 @@
 import {Component, View} from 'angular2/angular2';
 
 @Component({selector: 'redoc-test'})
-@View({template: '<h1>Hello {{ name }}!</h1>'})
+@View({
+  templateUrl: './lib/RedocTest/redoc-test.html',
+  styleUrls: ['./lib/RedocTest/redoc-test.css'],
+})
 // Component controller
 export class RedocTest {
   constructor() {

package.json

@@ -34,6 +34,7 @@
     "browser-sync": "^2.9.8",
     "del": "^2.0.2",
     "gulp": "^3.9.0",
+    "gulp-inline-ng2-template": "0.0.7",
     "jspm": "^0.16.11",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.1.4",