Reduce the size of Bootstrap with Gulp

Initially bootstrap vanilla (without modifications) with font-awesome uses in total 924k!!.
After some modifications in the css and javascript got 700kb. An 224 kb less corresponding to 24.25% less of size.


Remove components unused in my blog of bootstrap.

From css

From javascript

And the more important, remove glyphicons for use font-awesome.


Size of css

ls -lh
total 136K
-rw-r--r-- 1 diego users 111K nov 12 14:03 bootstrap.min.css
-rw-r--r-- 1 diego users  22K ago 26 14:03 font-awesome.min.css

Size of fonts glyphicons (built in default with bootstrap )

ls -lh  
total 152K
-rw-r--r-- 1 diego users 20K nov 12 14:03 glyphicons-halflings-regular.eot
-rw-r--r-- 1 diego users 62K nov 12 14:03 glyphicons-halflings-regular.svg
-rw-r--r-- 1 diego users 41K nov 12 14:03 glyphicons-halflings-regular.ttf
-rw-r--r-- 1 diego users 23K nov 12 14:03 glyphicons-halflings-regular.woff

Size of fonts font-awesome

ls -lh                                                                 
total 600K
-rw-r--r-- 1 diego users  84K ago 26 12:36 FontAwesome.otf
-rw-r--r-- 1 diego users  55K ago 26 12:36 fontawesome-webfont.eot
-rw-r--r-- 1 diego users 281K ago 26 12:36 fontawesome-webfont.svg
-rw-r--r-- 1 diego users 110K ago 26 12:36 fontawesome-webfont.ttf
-rw-r--r-- 1 diego users  64K ago 26 12:36 fontawesome-webfont.woff

Size of bootstrap javascript

ls -l
total 36
-rw-r--r-- 1 diego users 35601 nov 12 14:03 bootstrap.min.js

Gulp Code

First add the dependencies

var gulp = require('gulp');
var less = require('gulp-less');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var concat = require('gulp-concat');

Rememember install this with npm install --save-dev gulp gulp-less gulp-uglify gulp-minify-css gulp-rename gulp-concat

The magic part

First compile the bootstrap.less with the custom config. Then compile the less, minify, renamed and copied to assets/css.

gulp.task('bootstrap:compileLess', ['bootstrap:prepareLess'], function bootstrapCompileLess() {
  return gulp.src('bower_components/bootstrap/less/bootstrap.less')
      .pipe(rename({suffix: '.min'}))

You can get the custom boostrap.less here

Then the javascript part, here just get the components used for your web page and then concat this.

gulp.task('bootstrap:compileJs', function bootstrapCompileLess() {
  return gulp.src(['bower_components/bootstrap/js/button.js',
      .pipe(rename({suffix: '.min'}))

And finally here is the default task, when you put gulp in the terminal this will execute the two task.

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['bootstrap:compileLess', 'bootstrap:compileJs']);

You can get the gulpfile.js here

After customizations

ls -lh 
total 86K
-rw-r--r-- 1 diego users  86K ene  1 15:05 bootstrap.min.css
ls -lh
total 14K
-rw-r--r-- 1 diego users 14K ene  1 15:05 bootstrap.min.js
ls -lh
total 600K
-rw-r--r-- 1 diego users  84K ene  1 15:05 FontAwesome.otf
-rw-r--r-- 1 diego users  55K ene  1 15:05 fontawesome-webfont.eot
-rw-r--r-- 1 diego users 281K ene  1 15:05 fontawesome-webfont.svg
-rw-r--r-- 1 diego users 110K ene  1 15:05 fontawesome-webfont.ttf
-rw-r--r-- 1 diego users  64K ene  1 15:05 fontawesome-webfont.woff

Well, all this effort for 224kb less?

Maybe the difference of 224kb is irrelevant... or maybe not.

In conclusion all efforts are good to improve the size of page and reduce the time of load of your page, maybe this 224kb denote the difference in the 40% of people abandon a website that takes more than 3 seconds to load or not.