feat: update gulp config

- setup for critical path css
- setup for sw generation through workbox

covers: #22, #23

README.md

@@ -29,7 +29,7 @@ Most of the code in this project has been written to the ES6 JavaScript specific
 ### Gulp
 
 Install Gulp CLI: `npm install --save-dev gulp-cli -g`
-
 Install Gulp: `npm install --save-dev gulp -D`
-
 Install Gulp responsive images: `npm install --save-dev gulp-responsive`
+Install Critical path: ``
+Install Workbox: ``

gulpfile.js

@@ -1,52 +1,83 @@
-var gulp = require("gulp");
-var $ = require("gulp-load-plugins")();
+const 
+  gulp = require('gulp'),
+  critical = require('critical'),
+  $ = require('gulp-load-plugins')(),
+  workbox = require('workbox-build')
+;
 
-gulp.task("images", function() {
-  return gulp
-    .src("img/*.{jpg,png}")
-    .pipe(
-      $.responsive(
-        {
-          // Resize all JPG images to three different sizes: 200, 500, and 630 pixels
-          "*.jpg": [
-            {
-              width: 100,
-              rename: { suffix: "-100" }
-            },
-            {
-              width: 200,
-              rename: { suffix: "-200" }
-            },
-            {
-              width: 600,
-              rename: { suffix: "-400" }
-            },
-            {
-              // Compress, strip metadata, and rename original image
-              rename: { suffix: "-original-no-metadata" }
-            }
-          ],
-          // Resize all PNG images to be retina ready
-          "*.png": [
-            {
-              width: 250
-            },
-            {
-              width: 250 * 2,
-              rename: { suffix: "@2x" }
-            }
-          ]
-        },
-        {
-          // Global configuration for all images
-          // The output quality for JPEG, WebP and TIFF output formats
-          quality: 70,
-          // Use progressive (interlace) scan for JPEG and PNG output
-          progressive: true,
-          // Strip all metadata
-          withMetadata: false
-        }
-      )
-    )
-    .pipe(gulp.dest("dist/img"));
+let criticalPageToProcess = "index";
+criticalPageToProcess = "restaurant";
+gulp.task('critical', function (cb) {
+  critical.generate({
+    base: '/home/ubuntu/workspace/',
+    src: `${criticalPageToProcess}.html`,
+    css: ['css/styles.css'],
+    dimensions: [{
+      width: 320,
+      height: 480
+    },{
+      width: 768,
+      height: 1024
+    },{
+      width: 1280,
+      height: 960
+    }],
+    dest: `css/dist/critical.${criticalPageToProcess}.css`,
+    minify: true,
+    extract: false
+  });
 });
+
+gulp.task('images', function () {
+  return gulp.src('img/*.{jpg,png}')
+    .pipe($.responsive({
+      // Resize all JPG images to three different sizes: 200, 500, and 630 pixels
+      '*.jpg': [{
+        width: 128,
+        rename: { suffix: '-128w' },
+      }, {
+        width: 400,
+        rename: { suffix: '-400w' },
+      }, {
+        width: 500,
+        rename: { suffix: '-500w' },
+      }, {
+        // Compress, strip metadata, and rename original image
+        rename: { suffix: '-better-original' },
+      }],
+      // Resize all PNG images to be retina ready
+      '*.png': [{
+        width: 250,
+      }, {
+        width: 250 * 2,
+        rename: { suffix: '@2x' },
+      }],
+    }, {
+      // Global configuration for all images
+      // The output quality for JPEG, WebP and TIFF output formats
+      quality: 70,
+      // Use progressive (interlace) scan for JPEG and PNG output
+      progressive: true,
+      // Strip all metadata
+      withMetadata: false,
+    }))
+    .pipe(gulp.dest('img/dist'));
+});
+
+gulp.task('generate-service-worker', () => {
+  return workbox.generateSW({
+    globDirectory: dist,
+    globPatterns: ['**\/*.{html,js}'],
+    swDest: `${dist}/sw.js`,
+    clientsClaim: true,
+    skipWaiting: true
+  }).then(() => {
+    console.info('Service worker generation completed.');
+  }).catch((error) => {
+    console.warn('Service worker generation failed: ' + error);
+  });
+});
+
+gulp.task('default', function () {
+  runSequence('clean', 'build', 'generate-service-worker');
+});

package.json

@@ -1,4 +1,4 @@
-{
+	{
 	"name": "mws-nd-2018-stage-1",
 	"version": "1.0.0",
 	"description": "Restaurant Reviews app with Udacity MWS ND 2018",