- 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.
Source: Build Tools
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.
Complexity 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.
Documentation sucks 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
Want to write for DXKB?
Feel free to contribute. People from DXKB community will be more than happy.
Package management allows you to automatically download, install, and update software using remote repositories and in a consistent manner. Package managers are software tools that eliminate maintaining the software manually.Read more
Dockerizing is the process of packing, deploying, and running applications using Docker containers. Docker is an open source tool that ships your application with all the necessary functionalities as one package.Read more
Why does your source repository should always contain a lock file? The package managers would miss important imformation about installed packages without a lock file. It may result to installing two different modules from the same dependency definition.Read more
Updating the Dependencies
Not updating dependencies makes your product more and more difficult to maintain and it can bring security risks.Read more
Linting is a process of flagging programming and stylistic errors and verifying the code quality. You can also use auto fixer to get rid of the flagged errors.Read more