When you’re first learning to code, it’s easy to become overwhelmed by the veritable cornucopia of build tool options. Why are there so many? What do they do? What problems do they solve?
In this episode, we (not-too-deep) dive into Build Tools—specifically, Package Managers, Task Runners, and Module Loaders and Bundlers.
Learn what each of these tool types do, and briefly compare the different tools themselves. By the end of this episode, you’ll learn the problems that they solve, and how to make your life easier by applying them to your development workflow.
Hey everyone!
The Web Developer Roadmap by Kamran Ahmed (@kamranahmedse) provides a visual guide for navigating the complex world of web development.
This episode is a bit of an end cap to the Dissecting the Web Developer Roadmap series to address one of the themes that repeats across both the Front-End and Back-End portions: Build Tools.
I really felt that this area needed more attention, since time is everything when we’re building projects and practicing our skills. The more you can accomplish in any given period of time, the shorter your entire career transition will be!
If you haven’t checked out the rest of the series, you can hear all 4 episodes on the Dissecting the Web Developer Roadmap series landing page.
I hope you enjoy, and learn lots. 🙂
Episode Links
Updates and hand-picked resources related to the topics discussed in the episode—you’re welcome! ????
Get updates on Newbie Coder Problem Solving School!
Build Tools (General)
Why you need a build system like Grunt, Gulp or Brunch for your website
LearnCode.academy, Jan 2015
As the video summary reads, “A good build system will take your web development to a whole new level.” This video provides a solid overview of why that is, and how you can leverage it to build awesome websites and apps locally.
Package Managers
A Beginner’s Guide to npm
SitePoint, Jan 2018
Sitepoint always makes great resources! They do a particularly good job here of explaining connections between Node.js and npm, and showing how to install it.
Yarn Crash Course
Traversy Media, 2018
Yarn is Facebook’s package manager, which they build to meet their own particular needs. This video by Traversy explains the basics well.
Task Runners
Gulp vs Grunt vs Webpack: Comparison of Build Tools/Task Runners
DA-14 Software Development
I really liked this article (from March 2017) by Ukraine-based software development group DA-14 because it highlights the key differences between the Task Runners mentioned in the episode (NPM Scripts, Gulp, Grunt, CodeKit).
About NPM Scripts
The actual npm Scripts docs have lots of useful information! And they’re right from the horse’s mouth, so to speak. 🙂
Gulp JS Crash Course
Traversy Media, May 2017
A great “crash course” in Gulp: what it does, what problems it solves, and how to set it up to handle your development workflow.
Grunt JS: Quick Introduction
Tech CBT, Jul 2016
Not only does this video do a great job of explaining the concepts of minifying CSS and JavaScript even further than I did—it also goes into the actual details of how to use it. If you’re curious about Grunt and what it does, this is worth a watch.
CodeKit—their own videos
CodeKit made videos for their own product, which I kind of wish everyone would do. They also broke them down into every type of task you could want to do, so you can easily learn about exactly what you want and need.
Module Loaders and Bundlers
Understanding RequireJS for Effective JS Module Loading
SitePoint, Jan 2013
This article is older (5 years as of date of episode airing), but it still provides a solid overview of what RequireJS (module loader) does, and how it works to improve your code modularity.
PackWars: Webpack vs Browserify vs SystemJS vs RequireJS
Opher Vishnia, Render Conf 2017
Designer/Developer Opher Vishnia gave a great talk at Render Conf on the multiple options for Module Bundlers (and Loaders, i.e. RequireJS), and highlights their differences and similarities. I really enjoyed watching this video, and learned a lot!