Optimising the web build

Starting with the boilerplate

I’m using the one that comes with WebStorm, which is also the one found here: https://html5boilerplate.com/

Screen Shot 2017-05-15 at 11.40.50.png

Installing all the gulp dependancies:

Going to the gulpfile.js I added some more npm-gulp dependacnies so that I could minify and clean my code for the build version.

  • gulp-clean-css
  • gulp-imagemin
  • run-sequence
  • gulp-load-plugins
  • gulp-clean
  • del

I also added a normalize: https://necolas.github.io/normalize.css/

 

The Dist Folder:

Is now nicely structures without all the extra stuff from src

Screen Shot 2017-05-15 at 11.47.32.png

 

Running a simpleHHTPServer:

Shows my website, and that the css has been minified.

Screen Shot 2017-05-15 at 11.49.09.png

Size of Files:

My dist folder is only 22kb compared to 107kb for the src – neat!

Screen Shot 2017-05-15 at 11.50.05.png

References:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s