As a front-end developer, build tools can save you valuable time. They can do almost anything: download libraries, run tests, bundle packages, automatize tasks, and so much more.
- Install most code-related things for you.
- Automate menial and error-prone tasks in web development.
There are so many different build tools and you have to figure out which ones are useful for you. Sometimes you need multiple tools in one project. Here are some of the most popular build tools:
npm: Package manager.
- Read more: Package Management
- Webpack: Module bundler.
- Gulp: Runs and automatizes tasks.
ESLint: Code analyzer.
- Read more: Linting
- Grunt: Runs and automatizes tasks.
You should start using build tools immediately if you have not started already! They make your life easier.
Here is a short list of things Roneesh could automate with his build tools, as he mentioned in his article I finally made sense of front end build tools. You can, too:
- Replacing a string of text in a file
- Creating folders and moving files into those folders
- Running my unit tests with a single command
- Refreshing my browser when I save a file
- Modifying the placement of script tags on an html page
Most build tools are built on top of Node and npm (Node Package Management). For this reason, most of the front-end developers try to use these two tools as much as possible and then install additional tools. Npm comes preinstalled with Node.js.
The combination of the tools is up to you. Play with it, try to find the perfect match. Get familiar with one and after you are confident using it, start using a second one. You can even use just Node and npm together without any additional tools. As your project grows, it might need more tools. Take your time - there is no point in rushing things, it could cause confusion.
Too much information
There are so many front-end build tools that you can feel overwhelmed. But do not worry - once you make sense of the tools, you will realize that they are here to make your life easier, not more difficult.
Build tools can add a whole additional layer of complexity to your project. Learn just exactly what you need and do not worry about the rest. It may seem really complicated and only confuse you. Use only tools that your project really needs. When there is needed something new, learn it then.
Sometimes the documentation is just simply wrong. If you are confused, it might mean that the documentation is confusing. Or lacking whatsoever. Try to find a similar tool and do not waste your time.
- FreeCodeCamp: I finally made sense of front end build tools. You can, too.
- Medium: Modern Front End: The tools and build process explained
- LogRocket: Tools and modern workflow for front-end developers