I am used to only the basic and minimal Node apps run using node app.js
However recently I have seen the examples of most of the frameworks/libraries using one of the above which are called build tools. Now that is confusing me. Since a week I have been surfing this sea of MVC frameworks and now I am trying to piece up this jigsaw puzzle by listing down all the abstract terms(concepts) used in developing a JS web app.
Below is my understanding. Where do the templating engines, build tools fit here?
{ Server-side JS code that works with DB. Run with node command }
{ Server-side webserver and Routing code}
{ Client-Side JS and HTML}
They're task runners (Gulp & Grunt, basically) - they themselves don't do much of anything.
They allow you to incorporate other tools - plugins - to accomplish a task before pushing to production.
So for example - you may want to minify your CSS and JS.
You'll build a script that takes in all of these files; runs a plugin against them to minify the css and js - that can output new files into a production path and then re-incorporate those files into html so the minified versions can be used and not the un-minified versions. You'll then push the production path to production.
Once the script is written, it's repeatable. Instead of doing all these things manually every time, once your ready to push, you'll run the script and verify the output.
The plugins can do a pretty wide range of tasks - remove console.log commands, obfuscate code, etc... You can of course, write your own plugins also.
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!