diff --git a/gulpfile.js b/gulpfile.js index 4dc42b4..0edca52 100644 --- a/gulpfile.js +++ b/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()) diff --git a/package.json b/package.json index 87f66f8..0dc3915 100644 --- a/package.json +++ b/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" + } }