arosenb2/CriticalBookmarklet.js

## CriticalBookmarklet.js
javascript:!function(){!function(){var e=function(e,t,n){var r=n||{},o={},i=function(e){!!o[e.selectorText]==!1%26%26(o[e.selectorText]={});for(var t=e.style.cssText.split(/;(%3F![A-Za-z0-9])/),n=0;n<t.length;n++)if(!!t[n]!=!1){var r=t[n].split(": ");r[0]=r[0].trim(),r[1]=r[1].trim(),o[e.selectorText][r[0]]=r[1]}},a=function(){for(var n=e.innerHeight,o=t.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,function(){return NodeFilter.FILTER_ACCEPT},!0);o.nextNode();){var a=o.currentNode,c=a.getBoundingClientRect();if(c.top<n||r.scanFullPage){var l=e.getMatchedCSSRules(a);if(l)for(var f=0;f<l.length;f++)i(l[f])}}};this.generateCSS=function(){var e="";for(var t in o){e+=t+" { ";for(var n in o[t])e+=n+": "+o[t][n]+"; ";e+="}\n"}return e},a()},t=new e(window,document),n=t.generateCSS();console.log(n)}()}();

## Gulpfile.js
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    plumber = require('gulp-plumber'),
    svgSprite = require("gulp-svg-sprites"),
    rename = require('gulp-rename'),
    del = require('del');

var EXPRESS_PORT = 4000;
var EXPRESS_ROOT = __dirname;
var LIVERELOAD_PORT = 35729;

function startExpress() {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')());
  app.use(express.static(EXPRESS_ROOT));
  app.listen(EXPRESS_PORT);
}

// We'll need a reference to the tinylr
// object to send notifications of file changes
// further down
var lr;
function startLiveReload() {

  lr = require('tiny-lr')();
  lr.listen(LIVERELOAD_PORT);
}

function notifyLiveReload(event) {
  // `gulp.watch()` events provide an absolute path
  // so we need to make it relative to the server root
  var fileName = require('path').relative(EXPRESS_ROOT, event.path);
  console.log(fileName + " was changed.")
  lr.changed({
    body: {
      files: [fileName]
    }
  });
}

gulp.task('default',['express','livereload'],function () {
  gulp.watch('src/sass/*.scss', ['css']);
  gulp.watch('src/svg/*.svg', ['svg']);
  gulp.watch('src/images/*', ['image']);
  gulp.watch('*.html', notifyLiveReload);
  gulp.watch('dist/css/*.css', notifyLiveReload);
  gulp.watch('dist/images/*', notifyLiveReload);
});

gulp.task('express',function(){
  startExpress();
})

gulp.task('livereload',function(){
  startLiveReload();
})

gulp.task('css', function() {
  return gulp.src('src/sass/global.scss')
    .pipe(plumber())
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('svg', function () {
  return gulp.src('src/svg/*.svg')
    .pipe(svgSprite({mode: 'defs',svgId:'icon-%f',preview:false}))
    .pipe(gulp.dest('dist'));
});

gulp.task('image', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin({progressive: true}))
    .pipe(gulp.dest('dist/images'));
});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>IQ Suite Base Template</title>
</head>
<body>
<script type="text/javascript">
  function loadCSS(e,t,n){"use strict";var i=window.document.createElement("link");var o=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet";i.href=e;i.media="only x";o.parentNode.insertBefore(i,o);setTimeout(function(){i.media=n||"all"})}
  function loadJS(a){"use strict";var b=window.document.getElementsByTagName("script")[0];var c=window.document.createElement("script");c.src=a;b.parentNode.insertBefore(c,b);return c;}
  loadCSS("dist/css/global.min.css");
</script>
</body>
</html>

## package.json
{
  "name": "iqbase",
  "version": "1.0.0",
  "description": "Base for IQ Suite",
  "author": "CGI Federal",
  "license": "None",
  "private": true,
  "devDependencies": {
    "connect-livereload": "^0.4.0",
    "del": "^0.1.2",
    "express": "^4.8.4",
    "gulp": "^3.8.7",
    "gulp-autoprefixer": "0.0.8",
    "gulp-imagemin": "^1.0.0",
    "gulp-minify-css": "^0.3.7",
    "gulp-plumber": "^0.6.4",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^0.7.3",
    "gulp-svg-sprites": "^1.0.2",
    "tiny-lr": "^0.1.0"
  }
}
	var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	minifycss = require('gulp-minify-css'),
	imagemin = require('gulp-imagemin'),
	plumber = require('gulp-plumber'),
	svgSprite = require("gulp-svg-sprites"),
	rename = require('gulp-rename'),
	del = require('del');

	var EXPRESS_PORT = 4000;
	var EXPRESS_ROOT = __dirname;
	var LIVERELOAD_PORT = 35729;

	function startExpress() {
	var express = require('express');
	var app = express();
	app.use(require('connect-livereload')());
	app.use(express.static(EXPRESS_ROOT));
	app.listen(EXPRESS_PORT);
	}

	// We'll need a reference to the tinylr
	// object to send notifications of file changes
	// further down
	var lr;
	function startLiveReload() {

	lr = require('tiny-lr')();
	lr.listen(LIVERELOAD_PORT);
	}

	function notifyLiveReload(event) {
	// `gulp.watch()` events provide an absolute path
	// so we need to make it relative to the server root
	var fileName = require('path').relative(EXPRESS_ROOT, event.path);
	console.log(fileName + " was changed.")
	lr.changed({
	body: {
	files: [fileName]
	}
	});
	}

	gulp.task('default',['express','livereload'],function () {
	gulp.watch('src/sass/*.scss', ['css']);
	gulp.watch('src/svg/*.svg', ['svg']);
	gulp.watch('src/images/*', ['image']);
	gulp.watch('*.html', notifyLiveReload);
	gulp.watch('dist/css/*.css', notifyLiveReload);
	gulp.watch('dist/images/*', notifyLiveReload);
	});

	gulp.task('express',function(){
	startExpress();
	})

	gulp.task('livereload',function(){
	startLiveReload();
	})

	gulp.task('css', function() {
	return gulp.src('src/sass/global.scss')
	.pipe(plumber())
	.pipe(sass({ style: 'expanded' }))
	.pipe(autoprefixer('last 2 version'))
	.pipe(gulp.dest('dist/css'))
	.pipe(rename({suffix: '.min'}))
	.pipe(minifycss())
	.pipe(gulp.dest('dist/css'));
	});

	gulp.task('svg', function () {
	return gulp.src('src/svg/*.svg')
	.pipe(svgSprite({mode: 'defs',svgId:'icon-%f',preview:false}))
	.pipe(gulp.dest('dist'));
	});

	gulp.task('image', function() {
	return gulp.src('src/images/*')
	.pipe(imagemin({progressive: true}))
	.pipe(gulp.dest('dist/images'));
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
	<title>IQ Suite Base Template</title>
	</head>
	<body>
	<script type="text/javascript">
	function loadCSS(e,t,n){"use strict";var i=window.document.createElement("link");var o=t\|\|window.document.getElementsByTagName("script")[0];i.rel="stylesheet";i.href=e;i.media="only x";o.parentNode.insertBefore(i,o);setTimeout(function(){i.media=n\|\|"all"})}
	function loadJS(a){"use strict";var b=window.document.getElementsByTagName("script")[0];var c=window.document.createElement("script");c.src=a;b.parentNode.insertBefore(c,b);return c;}
	loadCSS("dist/css/global.min.css");
	</script>
	</body>
	</html>
	{
	"name": "iqbase",
	"version": "1.0.0",
	"description": "Base for IQ Suite",
	"author": "CGI Federal",
	"license": "None",
	"private": true,
	"devDependencies": {
	"connect-livereload": "^0.4.0",
	"del": "^0.1.2",
	"express": "^4.8.4",
	"gulp": "^3.8.7",
	"gulp-autoprefixer": "0.0.8",
	"gulp-imagemin": "^1.0.0",
	"gulp-minify-css": "^0.3.7",
	"gulp-plumber": "^0.6.4",
	"gulp-rename": "^1.2.0",
	"gulp-sass": "^0.7.3",
	"gulp-svg-sprites": "^1.0.2",
	"tiny-lr": "^0.1.0"
	}
	}