The physical construction of websites has become exceedingly more and more complex, as we add more content in an effort to provide more to customers, viewers and everyone else.
For example Cascading Style Sheets, or CSS helps to keep everything in order on a website, so that from page to page you have a similar positioning of the different components. But if your total web project grows to any degree, the management of different style sheets can become a burdensome matter.
Consequently, there are several pre-processors for CSS such as Stylus, Sass, LESS and Myth. These are a great help for organizing your CSS.
If you are creating HTML on a static page, it is not difficult at all until your have lots and lots of HTML pages that need to be handled. A great many of the HTML pages will have similar material that appears on the Header, Sidebar and the Footer.
So if you need to change an item or two on the sidebar, such as a series of links, it you be very laborious to have to go to each page and make the changes individually, so a Template engine is the answer. With a template engine you change one sidebar and all the rest of the pages have the sidebar with the new information as well.
So the template engines of Jade, Handlebars, and Kit all have this capability, and it makes the entire process so much more efficient and saves a lot of time.
There can be a lot of repetitiveness when you are putting together a website, as there has to be lots of testing, rechecking, refreshing of the browser, compiling and file concatenating. If all of this is going to be done by hand, it can take forever. Much of this process can be automated too by using what is called a Task Runner. Gulp and Grunt are two pieces of software that can be a big help here.
For instance say that your LESS file needs to be compiled into CSS you can use grunt to get it done not just on one webpage, but on all of them. Grunt can also remove files across the board.
Now, just imagine that you are building a website that also needs to be optimized for mobile usage. You are going to have to constantly test the mobile site by reloading the mobile browser all the time. There is a grunt plugin called BrowserSync which will handle that task for you.
Web tools today offer so much assistance and save so much time, it is going to be interesting to see what the future holds in these areas too.