Here’s a quick run down of how they work together. They are all such versatile tools that everyone uses them differently so don’t feel bad if you don’t get it right off the bat haha. It’s a lot.
NodeJS is basically a javascript run time for the desktop or server. Ionic specifically on the users end does not use it but the plugins do.
NPM is a package manager for node (node package manager). Ionic has their own package of code, bower, and gulp too. They’re tools that utilize the Node platform. Packages from npm usually go in node_modules. Some are global like cordova, some are local.
Bower is basically another package manager but it’s generally on a per-project basis. So in your bower config file you can see that it defines things like angular and also a version. Bower will automatically fetch and update those versions if it’s changed in the bower file. This is really useful by the way outside of ionic. So if you’re building a website and you want to use a few different components, you just have to add them to your bower file or use the terminal command and it will download them and manage them in the bower_components folder. So if you install a bower component, you don’t move it out of the bower components folder but you actually reference it. So in your code you would do like …/bower_components/asdf/asdf.js.
Gulp is kind of big. Essentially with gulp you can chain tasks together that are written in javascript. There thousands of tasks available. I believe Ionic uses gulp to do ‘ionic serve’, it also helps with clean up and I’m sure it does more. I use Gulp in a side project that helps me compile files together because I can tell it to take a bunch of files, remove comments, comment out logging, and then put them together as one file. Just an example of what it can do.
www/lib is the core ionic lib. You don’t want to alter these because if you update it will just get over written. All of your source should just be everything else in the www folder.
99.99% of the time you won’t have to alter any of these things, ionic handles all of that for you.
And this is where Ionic comes in, it manages all of this so you don’t have to. It makes sure that all the dependancies are correct, gives you all the files as a beginning structure, and then also has all of the ionic functions for things like deploy, push, analytics, etc built in.