Yeoman Angular-Gulp-Bower generator

Yeoman – The web’s scaffolding tool for modern webapps: Its basically a tool which combines the ‘Build System’ and the ‘Package Manger’.

Popular options for build system are: ‘Gulp’ and ‘Grunt’. And Popular options for package management are ‘Bower’ and ‘Node’.

Yeoman, holding both the build system and package management tools together allows us to create a ‘generator‘, which can be used to produce a final project with the build system and package management tools installed.

Setting up the base environment:

I. Install node.js:

1. Install node: http://nodejs.org/download/ [for windows download .exe and for mac download the universal .pkg file]

2. Double click on the installer and follow the instructions.

OR

Optionally we can install node using the ‘homebrew’ package manager:

http://brew.sh/ – install homebrew package manager.

Mac – open terminal install, run the following to install ‘home brew’:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

Once ‘home brew’ is installed, run the following to install ‘Node‘:

brew install node

Test: npm -v : should display the version of node installed else try re-installing.

II. Install Gulp:

Once node is installed. In the terminal or the command prompt Run:

npm install -g gulp

(OR) Run as admin – incase if the first one fails:

sudo npm install -g gulp

Test: gulp -v : should display the version of bower installed else try re-installing.

III. Intall Bower:

Once node is installed. In the terminal or the command prompt Run:

npm install -g bower

(OR) Run as admin – incase if the first one fails:

sudo npm install -g bower

Test: bower -v : should display the version of bower installed else try re-installing.

Now we are done with the basic setup. Lets jump to:

Creating a sample project with gulp and bower:

Step 1: Initialize node

Create a new project folder. Initialize node on the project: Terminal change directory to the Project’s and run:

npm init

Now you will be presented with with options to enter the project details. Enter all the details. Below is the screenshot for reference:

Once you initialize node, you can find a file called ‘package.json’ under your project folder. It holds the project information and also the dependencies and their versions. ‘package.json’ will look like following:

{
    "name": "Angular_Bean_Gen",
    "version": "1.0.0",
    "description": "Angular - Gulp Bower Generator",
    "main": "index.js",
    "dependencies": {
    },
    "devDependencies": {
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Step 2: Install Gulp locally

Terminal navigate to project folder. Run:

npm install gulp --save-dev

(use –save-dev to save the dependency in the ‘package.json’)

Once you installed Gulp you can now verify the ‘package.json’, Gulp has been added under dependencies:

package.json:

{
    "name": "Angular_Bean_Gen",
    "version": "1.0.0",
    "description": "Angular - Gulp Bower Generator",
    "main": "index.js",
    "dependencies": {
        "gulp": "~3.8.7"
    },
    "devDependencies": {
        "gulp": "~3.8.7"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

So why do we need this package.json:

You are installing any dependency and saving it to package.json. So now even if we remove any folders created by the dependencies (Ex: node_modules created by Gulp), we can still get it back by just running: ‘npm install’ command on the project folder.

So when you are running npm install, node is checking the package.json, if the required dependencies are not available it will download them.

Usage: When you are passing this project to some one in your team you don’t need to zip all the dependencies along with the project folder. You can remove the dependencies and just send the project with the package.json. And the other person will just run ‘npm install’ to download all the dependencies before running the project.

Step 3: Install Bower

Terminal navigate to project folder. Run:

npm install bower --save-dev

(use –save-dev to save the dependency in the ‘package.json’)

Now we installed both ‘Gulp’ and ‘Bower’ dependencies. The final ‘package.json’ will look like this:

{
    "name": "Angular_Bean_Gen",
    "version": "1.0.0",
    "description": "Angular - Gulp Bower Generator",
    "main": "index.js",
    "dependencies": {
        "gulp": "~3.8.7"
    },
    "devDependencies": {
        "gulp": "~3.8.7",
        "bower": "~1.3.9"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Done with the basic setup!

NOTE: Here we can observe that we are installing the dependencies (say gulp), first globally using ‘-g’, then in the project folder locally. Why? – Its quite simple, we may have many projects and we might need to install the dependencies in each one of them. Doing so everytime we need to download the dependecies from remote server. To avoid hitting the remote server everytime(a costly process) we install packages globally first.

So once we install the dependencies or the packages globally, when you try to install them on any project (local to project), first it will check if the packages are available globally in the machine and if available it will just copy them to the project else it will download them from server.

In the upcoming tutorial will discuss how to create a Yeoman Generator.

Also recommend you to check out these tutorials prior to creating a yeoman generator:

• Introduction to Gulp.js with example
• Grunt Vs Gulp – Javascript front end Build Tools
• Bower – A Package Manager for Front-End Web development

The post Yeoman Angular-Gulp-Bower generator appeared first on Techie Dreams.