Merge pull request #548 from floreks/icons-offline

Integrate material icons and roboto fonts with gulp build pipeline

Author: bryk

bower.json

@@ -9,7 +9,17 @@
     "angular-messages": "~1.5.0",
     "angular-ui-router": "~0.2.15",
     "angular-resource": "~1.5.0",
-    "angular-sanitize": "~1.5.0"
+    "angular-sanitize": "~1.5.0",
+    "material-design-icons": "~2.2.2",
+    "roboto-fontface": "~0.4.5"
+  },
+  "overrides": {
+    "material-design-icons": {
+      "main": "iconfont/material-icons.css"
+    },
+    "roboto-fontface": {
+      "main": "css/roboto-fontface.css"
+    }
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0",

build/build.js

@@ -43,16 +43,17 @@ gulp.task('build:cross', ['backend:prod:cross', 'build-frontend:cross']);
 /**
  * Builds production version of the frontend application for the current architecture.
  */
-gulp.task('build-frontend', ['assets', 'index:prod', 'clean-dist'], function() {
+gulp.task('build-frontend', ['fonts', 'icons', 'assets', 'index:prod', 'clean-dist'], function() {
   return buildFrontend(conf.paths.distPublic);
 });
 
 /**
  * Builds production version of the frontend application for all architecures.
  */
-gulp.task('build-frontend:cross', ['assets:cross', 'index:prod', 'clean-dist'], function() {
-  return buildFrontend(conf.paths.distPublicCross);
-});
+gulp.task(
+    'build-frontend:cross',
+    ['fonts:cross', 'icons:cross', 'assets:cross', 'index:prod', 'clean-dist'],
+    function() { return buildFrontend(conf.paths.distPublicCross); });
 
 /**
  * Copies assets to the dist directory for current architecture.
@@ -65,6 +66,28 @@ gulp.task('assets', ['clean-dist'], function() { return assets([conf.paths.distP
 gulp.task(
     'assets:cross', ['clean-dist'], function() { return assets(conf.paths.distPublicCross); });
 
+/**
+ * Copies icons to the dist directory for current architecture.
+ */
+gulp.task('icons', ['clean-dist'], function() { return icons(conf.paths.iconsDistPublic); });
+
+/**
+ * Copies icons to the dist directory for all architectures.
+ */
+gulp.task(
+    'icons:cross', ['clean-dist'], function() { return icons(conf.paths.iconsDistPublicCross); });
+
+/**
+ * Copies fonts to the dist directory for current architecture.
+ */
+gulp.task('fonts', ['clean-dist'], function() { return fonts(conf.paths.fontsDistPublic); });
+
+/**
+ * Copies fonts to the dist directory for all architectures.
+ */
+gulp.task(
+    'fonts:cross', ['clean-dist'], function() { return fonts(conf.paths.fontsDistPublicCross); });
+
 /**
  * Cleans all build artifacts.
  */
@@ -131,3 +154,27 @@ function assets(outputDirs) {
   return gulp.src(path.join(conf.paths.assets, '/**/*'), {base: conf.paths.app})
       .pipe(multiDest(outputDirs));
 }
+
+/**
+ * @param {string|!Array<string>} outputDirs
+ * @return {stream}
+ */
+function icons(outputDirs) {
+  let iconAssetsFilter = gulpFilter(['*.woff2', '*.woff', '*.eot', '*.ttf']);
+
+  return gulp.src(path.join(conf.paths.materialIcons, '*'), {base: conf.paths.materialIcons})
+      .pipe(iconAssetsFilter)
+      .pipe(multiDest(outputDirs));
+}
+
+/**
+ * @param {string|!Array<string>} outputDirs
+ * @return {stream}
+ */
+function fonts(outputDirs) {
+  let fontFilter = gulpFilter(['*.woff2']);
+
+  return gulp.src(path.join(conf.paths.robotoFonts, '*'), {base: conf.paths.robotoFonts})
+      .pipe(fontFilter)
+      .pipe(multiDest(outputDirs));
+}

build/conf.js

@@ -169,17 +169,25 @@ export default {
     distPublicCross: arch.list.map((arch) => path.join(basePath, 'dist', arch, 'public')),
     distRoot: path.join(basePath, 'dist'),
     externs: path.join(basePath, 'src/app/externs'),
+    fontsDistPublic: path.join(basePath, 'dist', arch.default, 'public/fonts'),
+    fontsDistPublicCross:
+        arch.list.map((arch) => path.join(basePath, 'dist', arch, 'public/fonts')),
     frontendSrc: path.join(basePath, 'src/app/frontend'),
     frontendTest: path.join(basePath, 'src/test/frontend'),
     goTools: path.join(basePath, '.tools/go'),
     goWorkspace: path.join(basePath, '.go_workspace'),
     hyperkube: path.join(basePath, 'build/hyperkube.sh'),
+    iconsDistPublic: path.join(basePath, 'dist', arch.default, 'public/static'),
+    iconsDistPublicCross:
+        arch.list.map((arch) => path.join(basePath, 'dist', arch, 'public/static')),
     integrationTest: path.join(basePath, 'src/test/integration'),
     karmaConf: path.join(basePath, 'build/karma.conf.js'),
+    materialIcons: path.join(basePath, 'bower_components/material-design-icons/iconfont'),
     nodeModules: path.join(basePath, 'node_modules'),
     partials: path.join(basePath, '.tmp/partials'),
     prodTmp: path.join(basePath, '.tmp/prod'),
     protractorConf: path.join(basePath, 'build/protractor.conf.js'),
+    robotoFonts: path.join(basePath, 'bower_components/roboto-fontface/fonts'),
     serve: path.join(basePath, '.tmp/serve'),
     src: path.join(basePath, 'src'),
     tmp: path.join(basePath, '.tmp'),