Merge pull request #548 from floreks/icons-offline

Integrate material icons and roboto fonts with gulp build pipeline

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'),

src/app/frontend/index.scss

-// Copyright 2015 Google Inc. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-// Import Roboto material design font. It is recommended by the Angular Material spec.
-// TODO(bryk): Bundle the fonts with production binary to not import from external sites.
-@import url('//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic');
-
-// Angular Material icon font. It allows to use the icons as fonts.
-@import url('//fonts.googleapis.com/icon?family=Material+Icons');