feat(build): add fonts support to build

Use a task to add all the fonts in JSPM_packages inside the /fonts folder in dev and prod

Linked to #2 (Issue stay open if we can try a more elegant solution)

build/tasks/build.js

@@ -48,20 +48,30 @@ gulp.task('build-index-html', () => {
     .pipe(gulp.dest(paths.releaseDir))
 });
 
+gulp.task('build-fonts', () => {
+  gulp.src(`${paths.srcDir}/fonts/**/*`)
+    .pipe(gulp.dest(`${paths.releaseDir}/fonts`));
+});
+
+gulp.task('build-pre-clean', (cb) =>
+    del([`${paths.releaseDir}/**/*`, `!${paths.releaseDir}/.keep`], cb)
+);
+
 gulp.task('build-clean', (cal) => {
   let targets = [
       `${paths.releaseDir}/${paths.app.name}.css`,
       `${paths.releaseDir}/${paths.app.name}.css.map`,
       `${paths.releaseDir}/${paths.app.name}.js`,
       `${paths.releaseDir}/${paths.app.name}.js.map`
   ];
-  del(targets, cal);
+  return del(targets, cal);
 });
 
 gulp.task('build', (cal) => {
   runSequence(
+    ['build-pre-clean'],
     'build-jspm',
-    ['build-js', 'build-css'],
+    ['build-js', 'build-css', 'build-fonts'],
     'build-index-html',
     'build-clean',
     cal);

build/tasks/fonts.js

@@ -0,0 +1,10 @@
+import gulp from 'gulp';
+import flatten from 'gulp-flatten';
+
+let ext = ['eot', 'woff2', 'woff', 'ttf', 'svg'];
+
+gulp.task('fonts', () =>
+    gulp.src(ext.map(ext => `./jspm_packages/**/*.${ext}`))
+      .pipe(flatten())
+      .pipe(gulp.dest('./public/fonts/'))
+);

build/tasks/sass.js

@@ -1,8 +1,13 @@
 import gulp from 'gulp';
 import sass from 'gulp-sass'
+import modifyCssUrl from 'gulp-modify-css-urls';
+import paths from '../paths';
+
+let modifyUrlOfFontUrl = {modify : (url) => '/fonts' + url.substr(url.lastIndexOf('/'))};
 
 gulp.task('sass', () =>
-    gulp.src(['./public/**/*.scss', '!./public/jspm_packages/**/*.scss'])
+    gulp.src(paths.glob.scss)
       .pipe(sass().on('error', sass.logError))
+      .pipe(modifyCssUrl(modifyUrlOfFontUrl))
       .pipe(gulp.dest('./public'))
 );

package.json

@@ -31,9 +31,11 @@
     "gulp-bump": "^1.0.0",
     "gulp-conventional-changelog": "^0.7.0",
     "gulp-eslint": "^1.0.0",
+    "gulp-flatten": "^0.2.0",
     "gulp-git": "^1.6.0",
     "gulp-inject": "^3.0.0",
     "gulp-minify-css": "^1.2.1",
+    "gulp-modify-css-urls": "^0.2.0",
     "gulp-ng-annotate": "^1.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.0.4",

public/config/bootstrap/variables.scss

@@ -1,2 +1,3 @@
+$brand-primary:         darken(#c800ca, 6.5%) !default;
+$icon-font-path: "/fonts/" !default;
 
-$brand-primary:         darken(#c800ca, 6.5%) !default;