Address comments

Author: devversion

tools/gulp/packaging/build-tasks-gulp.ts

@@ -5,7 +5,7 @@ import {SOURCE_ROOT, DIST_ROOT, HTML_MINIFIER_OPTIONS} from '../build-config';
 import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
 import {composeRelease} from './build-release';
 import {buildPackageBundles} from './build-bundles';
-import {inlineResourcesFolder} from './inline-resources';
+import {inlineResourcesForDirectory} from './inline-resources';
 
 // There are no type definitions available for these imports.
 const htmlmin = require('gulp-htmlmin');
@@ -84,7 +84,7 @@ export function createPackageBuildTasks(packageName: string, requiredPackages: s
     return src(htmlGlob).pipe(htmlmin(HTML_MINIFIER_OPTIONS)).pipe(dest(packageOut));
   });
 
-  task(`${packageName}:assets:inline`, () => inlineResourcesFolder(packageOut));
+  task(`${packageName}:assets:inline`, () => inlineResourcesForDirectory(packageOut));
 
   /**
    * Watch tasks, that will rebuild the package whenever TS, SCSS, or HTML files change.

tools/gulp/packaging/inline-resources.ts

@@ -4,8 +4,8 @@ import {dirname, join} from 'path';
 import {readFileSync, writeFileSync} from 'fs';
 import {sync as glob} from 'glob';
 
-/** Finds all JavaScript files and inlines all external resources of Angular components. */
-export function inlineResourcesFolder(folderPath: string) {
+/** Finds all JavaScript files in a directory and inlines all resources of Angular components. */
+export function inlineResourcesForDirectory(folderPath: string) {
   glob(join(folderPath, '**/*.js')).forEach(filePath => inlineResources(filePath));
 }
 
@@ -23,25 +23,24 @@ export function inlineResources(filePath: string) {
 /** Inlines the templates of Angular components for a specified source file. */
 function inlineTemplate(fileContent: string, filePath: string) {
   return fileContent.replace(/templateUrl:\s*'([^']+?\.html)'/g, (match, templateUrl) => {
-    const templateFile = join(dirname(filePath), templateUrl);
-    const templateContent = loadResourceFile(templateFile);
+    const templatePath = join(dirname(filePath), templateUrl);
+    const templateContent = loadResourceFile(templatePath);
     return `template: "${templateContent}"`;
   });
 }
 
-
 /** Inlines the external styles of Angular components for a specified source file. */
 function inlineStyles(fileContent: string, filePath: string) {
-  return fileContent.replace(/styleUrls:\s*(\[[\s\S]*?])/gm, (match, styleUrls) => {
+  return fileContent.replace(/styleUrls:\s*(\[[\s\S]*?])/gm, (match, styleUrlsValue) => {
     // The RegExp matches the array of external style files. This is a string right now and
-    // can to be parsed using the `eval` method.
-    const parsedUrls = eval(styleUrls) as string[];
-
-    return 'styles: [' + parsedUrls.map(styleUrl => {
-      const stylePath = join(dirname(filePath), styleUrl);
-      const styleContent = loadResourceFile(stylePath);
-      return `"${styleContent}"`;
-    }).join(',\n') + ']';
+    // can to be parsed using the `eval` method. The value looks like "['AAA.css', 'BBB.css"]"
+    const styleUrls = eval(styleUrlsValue) as string[];
+
+    const styleContents = styleUrls
+      .map(url => join(dirname(filePath), url))
+      .map(path => loadResourceFile(path));
+
+    return `styles: ["${styleContents.join(',')}"]`;
   });
 }