fallback support for font-awesome

in case of cdn goes down or develop offline font-awesome will be load locally from /css/font-awesome.min.css
makemek · Feb 22, 2017 · cb2e7fe · cb2e7fe
1 parent 564729f
commit cb2e7fe
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 5 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,11 +3,13 @@
 const appPort = process.env.PORT
 const devPort = process.env.PORT_DEV
 const css = 'src/views/*.css'
+const js = 'src/views/js/*.js'
 const htmlTemplate = 'src/views/**/*.hbs'
 const publicAssets = 'src/views/public'
 const destination = {
   css: publicAssets + '/css',
-  fonts: publicAssets + '/fonts'
+  fonts: publicAssets + '/fonts',
+  js: publicAssets + '/js'
 }
 
 const gulp = require('gulp')
@@ -17,8 +19,11 @@ const cleanCSS = require('gulp-clean-css')
 const rename = require('gulp-rename')
 const bs = require('browser-sync').create()
 const nodemon = require('gulp-nodemon')
+const gutil = require('gulp-util')
+const source = require('vinyl-source-stream')
+const browserify = require('browserify')
 
-gulp.task('build', ['build:css'])
+gulp.task('build', ['build:css', 'build:js'])
 
 gulp.task('build:css', () => {
   return gulp.src(css)
@@ -29,6 +34,15 @@ gulp.task('build:css', () => {
   .pipe(bs.stream())
 })
 
+gulp.task('build:js', () => {
+  browserify('src/views/js/')
+  .bundle()
+  .on('error', error => gutil.log(error))
+  .pipe(source('bundle.js'))
+  .pipe(gulp.dest(destination.js))
+  .pipe(bs.stream())
+})
+
 gulp.task('import', ['font-awesome'])
 
 gulp.task('font-awesome', () => {
@@ -61,5 +75,6 @@ gulp.task('browser-sync', ['nodemon'], () => {
   })
 
   gulp.watch(css, ['build:css'])
+  gulp.watch(js, ['build:js'])
   gulp.watch(htmlTemplate, bs.reload)
 })
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "express": "4.14.0",
     "express-handlebars": "3.0.0",
     "express-session": "1.14.2",
+    "fallbackjs": "1.1.8",
     "font-awesome": "4.7.0",
     "foreman": "2.0.0",
     "inherit": "2.2.6",
@@ -51,6 +52,7 @@
     "app-root-path": "2.0.1",
     "autoprefixer": "6.7.0",
     "browser-sync": "2.18.6",
+    "browserify": "14.1.0",
     "cheerio": "0.22.0",
     "coveralls": "2.11.14",
     "eslint": "3.9.1",
@@ -59,6 +61,7 @@
     "gulp-nodemon": "2.2.1",
     "gulp-postcss": "6.3.0",
     "gulp-rename": "1.2.2",
+    "gulp-util": "3.0.8",
     "istanbul": "0.4.5",
     "mocha": "3.1.2",
     "nock": "9.0.2",
@@ -67,6 +70,7 @@
     "sinon": "1.17.6",
     "slash": "1.0.0",
     "supertest": "2.0.1",
-    "supertest-as-promised": "4.0.2"
+    "supertest-as-promised": "4.0.2",
+    "vinyl-source-stream": "1.1.0"
   }
 }
diff --git a/src/views/js/index.js b/src/views/js/index.js
@@ -0,0 +1,4 @@
+'use strict'
+
+require('./lib-fallback')
+
diff --git a/src/views/js/lib-fallback.js b/src/views/js/lib-fallback.js
@@ -0,0 +1,8 @@
+require('fallbackjs/fallback.min')
+
+fallback.load({
+  'font-awesome': [
+    '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
+    'css/font-awesome.min.css'
+  ]
+})
diff --git a/src/views/layouts/defaultLayout.hbs b/src/views/layouts/defaultLayout.hbs
@@ -6,13 +6,13 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="favicon.ico">
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <link href="css/style.min.css" rel="stylesheet"/>
   <title>ModColle</title>
 </head>
 
 <body>
-	{{{body}}}
+  {{{body}}}
+  <script src="js/bundle.js"></script>
 </body>
 
 </html>