
## Table of Contents

1. [Introduction](#introduction)
2. [How to Enable Gulp](#how-to-enable-gulp)
3. [How to Enable Bower](#how-to-enable-bower)
4. [Git is Not Recognized Too?](#git-is-not-recognized-too)
5. [How to Enable Yo](#how-to-enable-yo)
6. [Still Not Working!?](#still-not-working)
7. [Conclusion](#conclusion)

## Introduction

You'll often see the following errors when running npm commands on a Windows OS system.

```
'Gulp' is not recognized as an internal or external command, operable program or batch file.
```

```
'Bower' is not recognized as an internal or external command, operable program or batch file.
```

```
'yo' is not recognized as an internal or external command, operable program or batch file.
```

Basically, you have to add the appropriate paths to the Environment Variables' `Path`.

## How to Enable Gulp

For gulp, you will have to add the following path to the Path System Variables so the command line will recognize npm's global path. Also, install gulp so the `gulp` command will be recognized. At the end, you'll have to restart the command line if you haven't done so after changing the system variables.

- Add path to Windows System Variables
  - %USERPROFILE%\AppData\Roaming\npm

  - C:\Program Files\nodejs\

Run the npm install command to install gulp:

    - `npm install -g gulp`

Restart Windows command line.

## How to Enable Bower

If you have already set up gulp, then the only thing you have to do is run npm for bower as a global package.

- `npm install -g bower`

## Git is Not Recognized Too?

- Go to Windows' Environment Variables and edit the Path variables. Make sure they contain the following paths, and also make sure Git actually exists at those locations.
  - Could be either of these:
    - `%PROGRAMFILES(x86)%\Git\bin`

    - %PROGRAMFILES(x86)%\Git\cmd

  Or maybe:
  - `%PROGRAMFILES%\Git\bin`

  - %PROGRAMFILES%\Git\cmd

## How to Enable Yo

It is the same as bower at this point. You will need to install Yeoman globally.

- `npm install -g yo`

If you can't install yo and the command line displays an error containing `If you are behind a proxy, please make sure that the 'proxy' config is set properly`, try running `npm config ls -l`. This command will show all the config settings for npm. Check the proxy — if the proxy is `null`, change it to `http://registry.npmjs.org/` with the following command:

```
npm config set registry http://registry.npmjs.org/
```

## Still Not Working!?

Before trying to figure out what's happening, restart your command line again — it might work. Also, it is better to use the Node.js command prompt.

## Conclusion

The "not recognized as an internal or external command" error on Windows is typically caused by missing paths in the system's Environment Variables. By adding the correct npm and Node.js paths, installing packages globally, and restarting the command line, you can resolve these issues for gulp, bower, yo, and Git.


How to fix 'XXX' is not recognized as an internal or external command, operable program or batch file.

Module is not Recognized as an Internal or External Command


#### Table of Contents

1. Use Gulp, Gulp Plugins and Browserify to build Angular app
2. package.json
3. Angular App
4. index.html
5. gulpfile.js
6. References or Links
7. Conclusion

## Use Gulp, Gulp Plugins and Browserify to build Angular app

This sample app use following technologies.

1. Node.js

2. Angular.js

3. Browserify

4. Gulp

5. gulp-connect

6. gulp-ng-annotate

The files structure will be following, also you can check the sample code
at [Github. After you download the code, run following command should be able to start
your app. The fisrt command will install all the node.js dependecy modules,
and second command will run the gulp task defined at
`gulpfile.js`

```
npm install -d
gulp
```

`App` folder are all the client side file for build angular app.

`Gulpfile` contains all the client side task build.

`Index.html` is the html page will be request by the client, also
contains the angular app.

`package.json` contains all the dependencies for this example.

gulp-test1

app

controllers

controller1.js
controller2.js
controller3.js

views

controller1.html
controller2.html
controller3.html

app.js

gulpfile.js
index.html
package.json

### package.json

The main module here are angular, angular-route and browserify, because
browserify will take care of angular app's dependency that's why need angular
as node module. Also, gulp and gulp's plugin modules, the gulp-np-annotate
will fix the issue when mininize js in angular, gulp-connect will run a test
app.

```
{
  "name": "gulp-test1",
  "version": "1.0.0",
  "description": "gulp-test1",
  "dependencies": {
    "angular": "^1.5.5",
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "angular": "^1.5.5",
    "angular-route": "^1.5.5",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^3.2.2",
    "gulp-cssmin": "^0.1.7",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-uglify": "^1.5.3",
    "vinyl-source-stream": "^1.1.0"
  },
  "author": "dake"
}
```

### Angular App

Following is the example code use browserify with angular, broserify will take
all the dependencies for angular. For example, following code is the
`app.js` at angular.js, which define where is the controller and
views, in angualr it is useing `angular-route`, and ofcourse,
app.js is also depend on `angular.js`. In Browserify, it is very
simple to define, you just need to write, `require('angular')`,
browserify will take care the dependency for you. Similar to the angular
controllers, you'll need to define as
`require('./controllers/controller1');`.

```
'use strict';
require('angular');
require('angular-route');
var app = angular.module('gulp.test1', ['ngRoute']);

require('./controllers/controller1');
require('./controllers/controller2');
require('./controllers/controller3');

app.config(function ($routeProvider) {
    $routeProvider
       .when('/', {
        templateUrl: 'views/controller1.html',
        controller: 'controller1',
        controllerAs: 'controller1'
      })
      .when('/1', {
        templateUrl: 'views/controller2.html',
        controller: 'controller2',
        controllerAs: 'controller2'
      })
       .when('/2', {
        templateUrl: 'views/controller3.html',
        controller: 'controller3',
        controllerAs: 'controller3'
      })
      .otherwise({
        redirectTo: '/'
      });
  });
```

```
'use strict';

angular.module('gulp.test1')
  .controller('controller1', function ($scope) {
    $scope.message = 'controller1!';
});
```

```
message: {{message}}
```

#### How do I use browserify to bundle all javascript

This is sample task at gulpfile.js, at end of this task, it will create a
javascript combined all the dependency javascript. In our previous
`app.js`. It shouldn't contains angular.js angular-route.js, all
the angular controllers and the app.js itself.

```
gulp.task('browserify', function () {
    return browserify('./app/app.js')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/js/'));
});
```

### index.html

In this example, `index.html` is the actual web page, as you can
see it is any reference to the minified javascript.

```
<!doctype html>













      home](https://github.com/keke78ui9/gulp_angular_browserify_sample1)
      [main](/#1)
      [main1](/#2)



```

### gulpfile.js

```
/// setup gulp

var gulp = require('gulp');
var connect = require('gulp-connect');
// requires browserify and vinyl-source-stream
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
//var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");
var ngAnnotate = require('gulp-ng-annotate');

gulp.task('connect', function () {
    connect.server({
        root: 'public',
        port: 4000
    })
});

gulp.task('browserify', function () {
    // Grabs the app.js file
    return browserify('./app/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('app.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});


gulp.task("min:js", function () {

    gulp.src(["./public/js/app.js"], { base: "." })
    .pipe(ngAnnotate())
    .pipe(concat("./public/js/app.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js"]);

// Views task
gulp.task('views', function () {

    // Any other view files from app/views
    gulp.src('./app/views/**/*')
    // Will be put in the dist/views folder
    .pipe(gulp.dest('./public/views/'));
    // copy html to production folder
    gulp.src('./index.html').pipe(gulp.dest('./public/'));
});

gulp.task('watch', function () {
    gulp.watch('app/**/*.js', ['browserify','views']);
});

gulp.task('default', ['browserify', 'views', 'min', 'watch','connect']);
```

### References or Links

1. [gulp's plugins There's thousands of plugins for gulp

browserify](http://gulpjs.com/plugins/) Official
website

2. [angular1 and angular2](https://angularjs.org/)

3. Most popular gulp plugins

### Conclusion

Gulp is very powerful client side task runner, there're many different plugins
you can use, also popular IDE visual studio is also start to use gulp/grunt as
client side task runner to build assets. That means more people will start
using it and create modules for it. Also with browserify it will even become
more powerful, it use node.js to combined all client side resources.


Start Use Gulp and Browserify to Build Angular App with Node.js


## Table of Contents

1. [Introduction](#introduction)
2. [gulpfile.js](#gulpfilejs)
3. [package.json](#packagejson)
4. [Other Resources](#other-resources)
5. [Conclusion](#conclusion)

## Introduction

This post shows how to use Gulp with an ASP.NET MVC 4.5.2 template and Browserify. Below are some useful references:

- Using Gulp - Microsoft
- Setting up Gulp and Bower for an ASP.NET MVC project in Visual Studio 2013
- How to use Gulp in Visual Studio
- Advanced AngularJS structure with Gulp, Node and Browserify
- Using Grunt/Gulp for Bundling and Minification in ASP.NET
- Migrating From ASP.NET MVC 5 to MVC 6
- Introducing Gulp, Grunt, Bower, and npm support for Visual Studio
- ASP.NET 5: Managing Client-side Dependencies with NPM, Bower and Gulp

## gulpfile.js

```
var gulp = require('gulp');
var connect = require('gulp-connect');
// requires browserify and vinyl-source-stream
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
//var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");

gulp.task('connect', function () {
    connect.server({
        root: 'public',
        port: 4000
    })
});

gulp.task('browserify.1', function () {
    // Grabs the app.js file
    return browserify('./app/test1/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('main.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});

gulp.task('browserify.2', function () {
    // Single point of entry (make sure not to src ALL your files, browserify will figure it out for you)
    //gulp.src(['./app/test2/app.js'])
    //.pipe(browserify({
    //    insertGlobals: true,
    //    debug: true
    //}))
    //// Bundle to a single file
    //.pipe(concat('bundle.js'))
    //// Output it to our dist folder
    //.pipe(gulp.dest('./public/js/'));

    // Grabs the app.js file
    return browserify('./app/test2/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('main.2.js'))
        // Bundle to a single file
        //.pipe(concat('bundle.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});

gulp.task('browserify.3', function () {
    // Grabs the app.js file
    return browserify('./app/test3/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('main.3.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});

gulp.task("min:js", function () {
    gulp.src(["./public/js/main.2.js"], { base: "." })
        .pipe(concat("./public/js/dist/main.2.js"))
        .pipe(uglify())
        .pipe(gulp.dest("."));

    gulp.src(["./public/js/main.js"], { base: "." })
    .pipe(concat("./public/js/dist/main.js"))
    .pipe(uglify())
    .pipe(gulp.dest("."));

    gulp.src(["./public/js/main.3.js"], { base: "." })
     .pipe(concat("./public/js/dist/main.3.js"))
     .pipe(uglify())
     .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js"]);

// Views task
gulp.task('views', function () {
    //// Get our index.html
    //gulp.src('./app/test2/index.html')
    //// And put it in the dist folder
    //.pipe(gulp.dest('dist/'));

    // Any other view files from app/views
    gulp.src('./app/test2/views/**/*')
    // Will be put in the dist/views folder
    .pipe(gulp.dest('./public/app/test2/views/'));
});

gulp.task('watch', function () {
    gulp.watch('app/**/*.js', ['browserify.2', 'browserify.1', 'views'])
});

gulp.task('default', ['connect', 'watch']);
```

## package.json

```
{
  "name": "test_angular",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "dependencies": {
    "angular": "^1.5.5",
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "angular": "^1.5.5",
    "angular-route": "^1.5.5",
    "browserify": "^13.0.0",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^3.2.2",
    "gulp-cssmin": "^0.1.7",
    "gulp-uglify": "^1.5.3",
    "vinyl-source-stream": "^1.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "no git"
  },
  "keywords": [
    "no",
    "keywords"
  ],
  "author": "",
  "license": "ISC"
}
```

## Other Resources

- Introduction to Bower, Grunt, and Gulp in Visual Studio
- How to use Gulp in Visual Studio
- ASP.NET - Progressive Enhancement with ASP.NET and React

## Conclusion

Using Gulp with ASP.NET MVC 4.5.2 along with Browserify allows you to bundle, minify, and manage your front-end JavaScript modules efficiently. The gulpfile and package.json above provide a working starting point for your project.


How to use Gulp with ASP.NET MVC 4.5.2 Template and Browserify.

Gulp

Module is not Recognized as an Internal or External Command

Start Use Gulp and Browserify to Build Angular App with Node.js

Gulp ASP.NET MVC 4.5.2 Template and Browserify

Subscribe for Updates