Installing Gulp for AngularJS

Standard

6

Key players

  1. Visual Studio
  2. NodeJS
  3. NPM
  4. Bower
  5. Gulp

Step 1: Installer

Please note you may also use chocolatey for installing nodejs and github

“Chocolatey is a package manager for Windows (like apt-get but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure currently using PowerShell as its focus for delivering packages from the distros to your door, err computer.”

Chocolatey

    choco install nodejs
    choco install nodejs.install
    choco install git 
    choco install git.install 

Step 2: Visual Studio Extensions

Optional:

Step 3: Global Node Packages

Install packages for CLI globally, This will enable glup and bower command line interfaces

  • NPM
  • bower
  • gulp
    npm install -g npm
    npm install -g bower
    npm install -g gulp
    

Please note: NPM will be automatcially downloaded with node js installer

Step 4: Create npm and bower dependencies files

In order to handle server side packages, create packages.json file

npm init

In order to handle client side packages, create bower.json file:

bower init

Step 5: Project specific Node Packages

  • gulp
npm install --save-dev gulp

–save-dev store packages to devDependencies in package.json file

–save store packages to dependencies in package.json file

7

Step 6: Project specific Bower Packages

    bower install angular --save
    bower install lodash --save
    bower install jasmine --save

For specific version of bower packages you may used #versionNumber

    bower install angularjs#v1.3.8 --save
    bower install lodash#v3.10.1 --save

Step 7: Add gulp config file in project

Add gulpfile.js in project and paste below code in it.

    var gulp = require('gulp');
    gulp.task('testing', function () {
        console.log('Hello world!');
    });

require grab our gulp packages

Step 8: Executing Gulp Task

Now execute testing task in CMD (make sure CMD refer to project path)

    gulp testing

 

*Images created by John Papa

Advertisements

2 thoughts on “Installing Gulp for AngularJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s