What is a build tool?
In 1976 Stuart Feldman was inspired to write Make after witnessing a coworker unsuccessfully debug a program of he wrote. Feldman created Make to automate the process of building programs through the use of Make config files and automation.
How did we get here?
// Angular music player clone folder structure app - controllers - AlbumCtrl.js - CollectionCtrl.js - LandingCtrl.js - services - fixtures.js - pages - index.html - templates - album.html - collection.html - player_bar.html - landing.html
Angular did a lot to help with code organization and development speed in the early 2010s, natural made project sizes smaller through code reuse, but performance and page speed are still issues. While many of us can navigate these complex web projects with nothing more than an iPhone and an unlimited bandwidth plan, we still risk leaving much of the world behind and ultimately compromising the security and scalability of the web.
We moved from a world where you could FTP an index.html to the cloud to now needing node to deliver a server-rendered experience at all times. Luckily the dream of the 90s is still alive today because build tools are making what was once very complex in static content leveraging dynamically placed script tags.
That’s where build tools come in, they take our dynamically-rendered content and render it into static assets. Building static assets tremendously improves the speed and size of your site. It also adds an extra layer of security by abstracting the client databases or other sensitive information. Best practices like minification (whitespace removal) and module bundling can now be completed from CLI commands and automated from your build scripts.
Build tools are making static relevant again
<--! index.html --> ... <script src="/js/jquery-2.2.4.min.js"></script> <script src="/js/segment.js"></script> <script src="/js/jquery.scrollTo.min.js"></script> <script src="/js/jquery.localScroll.min.js"></script> <script src="/js/cloudinary-core-shrinkwrap.min.js"></script> <script src="/js/modernizr.js"></script> <script src="/js/ease.js"></script> <script src="/js/mobilemenu.js"></script> <script src="/js/jquery.matchHeight.js"></script> <script src="/js/prism.js"></script> <script src="/js/requestAnimationFramePolyfill.js"></script> <script src="/js/equalizeHeights.js"></script> <script src="/js/algoliasearch.js"></script> <script src="/js/liveSearch.js"></script> <script src="/js/clipboard.min.js"></script> <script src="/js/interactiveFeatures.js"></script> <script src="/app.js"></script> </body> </html>
Script tags can become an orchestration nightmare trying to rely too much on the order of which script tags are placed, as well as, whether you loaded the script tag in the