Even for experienced developers, front-end tools can be a headache, like me. The best way to solve this problem is to conceptually understand how they work, how they interact with each other.

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch…There are so many nouns that you feel at a loss for a moment, as if you can’t finish learning them.

The key is, don’t let them intimidate you. Remember, all of these tools were originally designed to make your job easier.

To understand what these tools are, how they work, and why you should use them, you really only need to grasp a few core concepts.

Concept of 1:buildThe two core functions of the tool areThe installationvsTo do things

In essence, development tools do two things:

When approaching a new development tool, you need to know one thing first:Is the purpose of this tool to help me install things, or to help me do things?

Tools to install classes, for examplenpm,BowerandYeomanAlmost anything can be installed, they can be used to install front-end libraries, for exampleAngular.jsorReact.js. They can also install servers for your development environment. They can install test libraries. They can even help you install other front-end development tools.

In short, they can install anything you can think of that has to do with code.

Tools that do things for you, for exampleGrunt,Webpack,Require.js,BrunchuandGulpIt’s a little more complicated. The goal of this kind of tool is inwebHelp you complete automation in development. Sometimes, what these tools do is calledTask (task).

To accomplish these tasks, such tools often require their own package and plug-in ecology. Each tool uses a different way to accomplish its task. These tools also do different things. Some tools are good at handling tasks that you specify, for exampleGruntandGulpSuch tools. There are also tools that focus on just one thing, such as processingJavaScriptDepend on, for exampleBrowserifyandRequire.jsSuch tools.

Sometimes, you may need to use more than one tool in a project. For example, I worked on a project where I used different tools to automate the following tasks:

  1. Replaces a text string in a file

  2. Create folders and move files to them

  3. Run unit tests with a single command

  4. Refresh the browser when I save the file

  5. allJavaScriptFile consolidation into one file, will allCSSFile consolidation into a single file

  6. For allJavaScriptandCSSSimplify it

  7. inhtmlPage modification