More logging of file sizes, saner browserlist

gulpfile.js

@@ -6,6 +6,7 @@ const cssnano = require('cssnano')
 const sourcemaps = require('gulp-sourcemaps')
 const bytediff = require('gulp-bytediff')
 const browserSync = require('browser-sync').create()
+const chalk = require('chalk');
 
 const paths = {
   styles: {
@@ -17,6 +18,29 @@ const paths = {
   }
 }
 
+// https://stackoverflow.com/a/20732091
+function humanFileSize(size) {
+  var i = Math.floor( Math.log(size) / Math.log(1024) );
+  return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+};
+
+function formatByteMessage(source, data){
+  var change = (data.savings > 0 ? 'saved' : 'gained');
+  var prettySavings = humanFileSize(Math.abs(data.savings));
+  var prettyStartSize = humanFileSize(data.startSize);
+  var prettyEndSize = humanFileSize(data.endSize);
+
+  if(data.endSize > data.startSize){
+    prettyEndSize = chalk.yellow(prettyEndSize);
+  }
+
+  if(data.endSize < data.startSize){
+    prettyEndSize = chalk.green(prettyEndSize);
+  }
+
+  return `${chalk.cyan(source.padStart(12, ' '))}: ${data.fileName} ${change} ${prettySavings} (${prettyStartSize} -> ${prettyEndSize})`
+}
+
 function style() {
   return (
     gulp.src(paths.styles.src)
@@ -24,8 +48,11 @@ function style() {
         .pipe(sass())
         .on('error', sass.logError)
         .pipe(bytediff.start())
-        .pipe(postcss([ autoprefixer(), cssnano() ]))
-        .pipe(bytediff.stop())
+        .pipe(postcss([ autoprefixer()]))
+        .pipe(bytediff.stop((data) => formatByteMessage("autoprefixer", data)))
+        .pipe(bytediff.start())
+        .pipe(postcss([cssnano()]))
+        .pipe(bytediff.stop((data) => formatByteMessage("cssnano", data)))
         .pipe(sourcemaps.write('.'))
         .pipe(gulp.dest(paths.styles.dest))
         .pipe(browserSync.stream())

package.json

@@ -28,14 +28,15 @@
     "browser-sync": "^2.26.3",
     "cssnano": "^4.1.10",
     "gulp": "^4.0.0",
+    "gulp-bytediff": "^1.0.0",
     "gulp-postcss": "^8.0.0",
     "gulp-sass": "^4.0.2",
-    "gulp-sourcemaps": "^2.6.5",
-    "gulp-bytediff": "^1.0.0"
+    "gulp-sourcemaps": "^2.6.5"
   },
   "browserslist": [
-    "last 1 version",
-    "not dead",
-    "> 5%"
-  ]
+    "defaults AND not android 4.4.3"
+  ],
+  "dependencies": {
+    "chalk": "^2.4.2"
+  }
 }