Fix #14 - Update example to current Gulp best-practice

.gitignore

@@ -1,5 +1,2 @@
 node_modules
 .tmp
-.sass-cache
-app/bower_components
-test/bower_components

README.md

@@ -1,29 +1,10 @@
-critical-path-css-demo
-======================
+# critical-path-css-demo
 
 Generate and inline critical-path CSS example using [Critical](http://github.com/addyosmani/critical).
 
-Live demo of [before](http://addyosmani.github.io/critical-path-css-demo/output/normal) and [after](http://addyosmani.github.io/critical-path-css-demo/output/critical) critical-path CSS generation and inlining.
+Live demo of [before](https://mor10.github.io/critical-path-css-demo/output/normal/index.html) and [after](https://mor10.github.io/critical-path-css-demo/output/critical/index.html) critical-path CSS generation and inlining.
 
-*PageSpeed Insights results of before and after*
-
-Before:
-
-![](http://i.imgur.com/3vB2xRB.png)
-
-After:
-
-![](http://i.imgur.com/Kk6kCqn.png)
-
-*WebPageTest results*
-
-Before:
-
-![](http://i.imgur.com/21Nrffy.png)
-
-After:
-
-![](http://i.imgur.com/GtINgPj.png)
+Example based on stripped-down version of Bootstrap Starter.
 
 ### Great. So, what are your recommendations?
 
@@ -42,7 +23,7 @@ async load in your [site-wide](https://github.com/addyosmani/critical-path-css-d
 
 ```sh
 $ cd critical-path-css-demo
-$ npm install && bower install
+$ npm install
 ```
 
 ## Generating and inlining critical-path CSS
@@ -66,64 +47,64 @@ This performs the normal build, then generates and inlines critical-path CSS for
 
 ## Tutorial
 
-Follow the next few lines to install and scaffold a project using [Yeoman](http://yeoman.io) and Gulp:
+Follw these instructions to incorporate Critical in your Gulp build process:
 
-```sh
-$ mkdir myapp && cd myapp
-$ npm install -g yo generator-gulp-webapp
-$ yo gulp-webapp
-
-# Select Bootstrap and say no to Modernizr & Sass
-```
-
-You should now have a valid set of source files, including a `Gulpfile.js`. 
-
-The first thing we're going to do is install the Critical module which can generate and inline your critical-path CSS for you. 
-
-This can be installed as follows:
+Install the Critical module which can generate and inline your critical-path CSS for you. From your project folder containing `Gulpfile.js`:
 
 ```sh
-$ cd myapp
 $ npm install critical --save-dev
 ```
 
-Great. Next, add a reference to Critical at the top of your `Gulpfile.js`:
+Next, add a reference to Critical at the top of your `Gulpfile.js`:
 
 ```js
-var critical = require('critical');
+const critical = require("critical");
 ```
 
-We can now use it in our build process. Let's write a new task called `critical`.
-
-Our workflow for critical-path CSS is to first run a normal `build`, which will generate the optimized CSS (`dist/styles/main.css`) and resources needed for our app. We pass the `build` command as the second argument below:
+Our workflow for critical-path CSS is to first run all other build processes to generate the optimized CSS and resources needed for our app. In this example, the js, images, styles, and html processes are run in parallel:
 
 ```js
-gulp.task('critical', ['build'], function () {
+exports.default = parallel(js, images, styles, html);
+```
+
+Next, write a new function called `criticalCSS`:
 
-});
+```js
+function criticalCSS(cb) {
+  critical.generate({
+    inline: true,
+    base: "./dist/",
+    src: "../src/index.html",
+    // Output results to file
+    target: {
+      css: "critical.css",
+      html: "index.html",
+      uncritical: "uncritical.css",
+    },
+    minify: true,
+    width: 320,
+    height: 480,
+  });
+  cb();
+}
 ```
 
-Next, we'll add in our configuration for the `critical` module:
+Finally, run the `criticalCSS` function after the other processes are complete. In this example we use the `series` to control the execution order:
 
 ```js
-gulp.task('critical', ['build'], function (cb) {
-    critical.generate({
-        inline: true,
-        base: 'dist/',
-        src: 'index.html',
-        dest: 'dist/index-critical.html',
-        minify: true,
-        width: 320,
-        height: 480
-    });
-});
+exports.critical = series(parallel(js, images, styles, html), criticalCSS);
 ```
 
-That's it. You can now run `gulp critical` to generate a complete build where `dist/index-critical.html` will contain your final output files. Above I've passed in a `width` and `height` which represent the viewports I'm targeting with my above-the-fold CSS. `minify` ensures that the inlined CSS gets minified.
+That's it. You can now run `gulp` to generate a standard build, and `gulp critical` to generate a complete build using Critical.
 
 ## Disclaimer
 
 Note that this sample project is just that - a sample. It does not demonstrate how well these tools and
 techniques work on a complex site nor a site making heavy use of dynamic styles. Your mileage may vary
 and I encourage testing the tools available before making a decision about whether Critical makes sense
 for you.
+
+# Credits
+
+- Original example and documentation by [@addyosmani](https://github.com/addyosmani)
+- Updated by [@mor10](https://github.com/mor10) 2021