From acaba493d98f3131c3baa486e282c0fbc8fa55c7 Mon Sep 17 00:00:00 2001
From: Roman Gotsiy <gotsijroman@gmail.com>
Date: Sat, 3 Oct 2015 12:50:35 +0300
Subject: [PATCH] Support for html and css in separate files

---
 .gitignore                    |  1 +
 build/paths.js                |  5 ++++-
 build/tasks/build.js          | 16 ++++++++++++----
 build/tasks/clean.js          |  2 +-
 build/tasks/watch.js          |  4 +++-
 lib/RedocTest/redoc-test.css  |  3 +++
 lib/RedocTest/redoc-test.html |  1 +
 lib/RedocTest/redoc-test.js   |  5 ++++-
 package.json                  |  1 +
 9 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 lib/RedocTest/redoc-test.css
 create mode 100644 lib/RedocTest/redoc-test.html

diff --git a/.gitignore b/.gitignore
index 44d7f605..a999e0b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ jspm_packages
 
 /dist
 /demo/build
+.tmp
diff --git a/build/paths.js b/build/paths.js
index d6737fee..f5210ba7 100644
--- a/build/paths.js
+++ b/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/**/*'
 };
diff --git a/build/tasks/build.js b/build/tasks/build.js
index 290f73f8..736e4b39 100644
--- a/build/tasks/build.js
+++ b/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) {
diff --git a/build/tasks/clean.js b/build/tasks/clean.js
index 2f9c3bc1..f96f5682 100644
--- a/build/tasks/clean.js
+++ b/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));
 });
diff --git a/build/tasks/watch.js b/build/tasks/watch.js
index 0454a86f..ee6e9100 100644
--- a/build/tasks/watch.js
+++ b/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);
 });
diff --git a/lib/RedocTest/redoc-test.css b/lib/RedocTest/redoc-test.css
new file mode 100644
index 00000000..4803c77c
--- /dev/null
+++ b/lib/RedocTest/redoc-test.css
@@ -0,0 +1,3 @@
+h1 strong {
+  color: #1976D3;
+}
diff --git a/lib/RedocTest/redoc-test.html b/lib/RedocTest/redoc-test.html
new file mode 100644
index 00000000..13a505da
--- /dev/null
+++ b/lib/RedocTest/redoc-test.html
@@ -0,0 +1 @@
+<h1>Hello <strong>{{ name }}</strong>!</h1>
diff --git a/lib/RedocTest/redoc-test.js b/lib/RedocTest/redoc-test.js
index b79ad223..dc75a85a 100644
--- a/lib/RedocTest/redoc-test.js
+++ b/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() {
diff --git a/package.json b/package.json
index 577a358a..36780221 100644
--- a/package.json
+++ b/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",