Web - Build (Tool)

About

build tool in Web

A production application will:

  • minify and merge the HTML, CSS, JS files
  • and optimise files like images.

Build Steps

Concatenation

concatenation means simply merging multiple files together, i.e. copying and pasting several files into one.

The reason is that it’s more efficient for a browser to fetch one file, rather than lots of small files.

Minification

The term minification or compression in the context of CSS, Javascript means removing all unnecessary characters, such as spaces, new lines, comments without affecting the functionality of the source code.

Minification is the process of taking a file and making the overall number of characters less, without changing how the code works. The goal is to make the file size smaller.

Example:

  • removing comments,
  • taking a long variable name and making it smaller.

Image optimization

Meta data is removed from the image as it’s not needed by the browser to display the image

Example: information about the camera used to take the photo.

Auto-prefixer

To automatically add the prefixes

  • Gulp: gulp-autoprefixer
  • Gunt: grunt-autoprefixer

Live reloading

Software


Powered by ComboStrap