Understanding Ionic, Gulp, Bower, NPM


#1

I’m new to Angular stuff, and I was recommended to use Ionic. What I do not understand is how to install, update stuff.

I’ve been looking for already built Ionic projects, and I’ve seen:

  • bower_components folder, where apparently the bower installations
    goes
  • www/lib folder (I do not know how to “put” things here, or if
    something puts automatically)
  • gulpfile.js , I do not understand if I have to modify or something modifies for me

Also, sometimes I see github projects that says to install things using NPM, others using bower …

  • when something is installed through NPM I do knot where it goes
  • when something is installed through bower it goes to bower_components folder, but then I do not know how to “move” it to www/libs folder (I know how to move folders, but I mean if some command does it automatically)
  • And gulpfile is for what ? :stuck_out_tongue:

Please, any tutorial or simply explanation to all this ?

thank you


#2

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.


Ionic + bower --> how does it work?
#3

But bower_components is “out” of “www” … so I can not refer to that folder from www folder, since www folder won’t have access to that folder … that’s because I wondered how to “move” properly the libraries downloaded through bower to “www/libs/”


#4

You can specify the installation directory of bower components and use a different directory. Create a file called “.bowerrc” and add an entry “directory” and point it to “www/lib”. Actually this file is already provided when you create a new ionic project.
See http://bower.io/docs/config/#directory


#5

I did forget to mention that, traditionally you don’t have to move the bower components but if you set that up like @tomkuipers mentioned you will be all set.

Bower is a lot of fun :smiley:


#6

1 more tip: never edit files in the bower directory due to updating (otherwise updating will revert your edit)