Oh! Welcome to Javascript Tooling!
Gulp is a a build system used for automating minial tasks like minification, transpilation, copying of all JavaScript files, static images, watch files etc. It can be combined with other tools to perform certain tasks for e.g. it can be combined with browserify (browserify simply lets you import your npm modules in the browser by bundling all your dependencies) to create the bundle which can be used as client side JS.
Grunt is a task manager and essentially does what you can do with gulp, just that I found it to be more focused on configuration than code.
Webpack is a module bundler. It manages dependencies and packs your modules for browser similar to browserify. Its also used to bundle all your assets and can be extended to do other stuff using loaders.
Babel transpiles JSX, ES2015 into ES5 and bunch of other stuff as well.
Where do they fit in?
You don't need it if you are just serving some template(ejs, jade etc) with some dynamic content in it. However say if you are replacing your templates with React components (for all the goodness that React brings with it), you will need a way to serve all this JS or JSX files to browser.
In this process, you need to compile JSX files into JS, which is done by babel but this is a task. If these JS files are in ES2015, you will need to transpile all these JS files into ES5, so this is the second task. All these JS files have tons of dependencies, requiring lot of modules, so you need to make sure that all these dependencies are satisfied before that component renders, this is the third task. Well, you can't serve terabytes of JS to browser, so lets atleast minify it, this would be your fourth task. There could be more tasks to this list.
Going through these steps, Babel can do first and second task (transpiling JSX, ES2015 to ES5), Browserify/Webpack can do dependency management and let you pack modules for browser. You will need a way to perform all tasks which can be done by gulp/grunt/webpack.
The key thing is to understand what these tools are capable of doing individually and then how you can combine with others to get desired workflow. There are multiple choices to do the same thing, which is the root of all JS fatigue. I know its frustrating and easy to get lost in the sea of options. I personally like Webpack and would recommend it too. I think you should dive deep into it and understand various parts of whole tooling.
Best of luck!