Advanced tools for Front-end, what to choose and why you need it?

Question

css

Often I began to see different tools like Bower, Grunt, Gulp, Node.js and so on.
Please tell me what is the use of them and what is their clear purpose of appointment? What benefits do they provide? Which of these should be studied?
Somehow I didn’t touch this topic and I don’t even know where to start. My knowledge of HTML\CSS3 (with frameworks and preprocessors), vanilla JS and jQuery, PHP basics.

Answer 1

Yes, if you are not a front-ender guru, then you don’t need to know everything thoroughly and it’s impossible. As a rule, in WEB development there are just actions (including the front-end side) that are monotonous and repeat the same operation from project to project. For these purposes - grunt and gulp. But even if you don't know him, it won't be difficult to write a simple script. It is important to understand general concepts (concatenation, minimization). Also with the bower. If you understand what a package manager is, then this will be enough to smoke bower.io as well. And in general - do not bother. Everything can be learned - just by reading the documentation and being guided in general terms for what it is needed.

Answer 2

"My knowledge of HTML\CSS3 (with frameworks and preprocessors), vanilla JS and jQuery, PHP basics."

- so after all this, you just need to learn and use Bower (although you can do without it), the same Gulp or Webpack (somehow I can hardly imagine life without them - these are project builders), and Node.js for js on server.