
<p>How to Use Gulp ast ASP.NET MVC 4.5.2 Template</p>
<ul>
  <li>
    <a
      href="http://docs.asp.net/en/latest/client-side/using-gulp.html"
      target="_blank"
      rel="noopener"
      >Using Gulp - Microsoft</a
    >
  </li>
  <li>
    <a
      href="http://weblogs.asp.net/fredriknormen/setting-up-gulp-and-bower-for-a-asp-net-mvc-project-in-visual-studio-2013"
      target="_blank"
      rel="noopener"
      >Setting up Gulp and Bower for an Asp.Net MVC project in Visual Studio
      2013</a
    >
  </li>
  <li>
    <a
      href="http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx"
      target="_blank"
      rel="noopener"
      >How to use Gulp in Visual Studio</a
    >
  </li>
  <li>
    <a href="https://omarfouad.com/" target="_blank" rel="noopener"
      >Advanced AngularJS structure with Gulp, Node and Browserify</a
    >
  </li>
  <li>
    <a
      href="http://anthonychu.ca/post/using-grunt-gulp-bundling-minification-asp-net/"
      target="_blank"
      rel="noopener"
      >Using Grunt/Gulp for Bundling and Minification in ASP.NET</a
    >
  </li>
  <li>
    <a
      href="http://aspnetmvc.readthedocs.org/projects/mvc/en/latest/migration/migratingfrommvc5.html"
      target="_blank"
      rel="noopener"
      >Migrating From ASP.NET MVC 5 to MVC 6</a
    >
  </li>
  <li>
    <a
      href="http://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx"
      target="_blank"
      rel="noopener"
      >Introducing Gulp, Grunt, Bower, and npm support for Visual Studio</a
    >
  </li>
  <li>
    <a
      href="http://www.mikesdotnetting.com/article/283/asp-net-5-managing-client-side-dependencies-with-npm-bower-and-gulp"
      target="_blank"
      rel="noopener"
      >ASP.NET 5: Managing Client-side Dependencies with NPM, Bower and Gulp</a
    >
  </li>
</ul>
<h3>gulpfile.js</h3>
<pre class="language-javascript"><code>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']);
</code></pre>
<h3>package.json</h3>
<pre class="language-javascript"><code>{
  "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\" &amp;&amp; exit 1"
  },
  "repository": {
    "type": "git",
    "url": "no git"
  },
  "keywords": [
    "no",
    "keywords"
  ],
  "author": "",
  "license": "ISC"
}

</code></pre>
<p>Other Resources</p>
<ul>
  <li>
    <a
      href="https://www.simple-talk.com/dotnet/asp.net/introduction-to-bower,-grunt,-and-gulp-in-visual-studio/"
      target="_blank"
      rel="noopener"
      >Introduction to Bower, Grunt, and Gulp in Visual Studio</a
    >
  </li>
  <li>
    <a
      href="http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx"
      target="_blank"
      rel="noopener"
      >How to use Gulp in Visual Studio</a
    >
  </li>
  <li>
    <a
      href="https://msdn.microsoft.com/en-us/magazine/mt632272.aspx"
      target="_blank"
      rel="noopener"
      >ASP.NET - Progressive Enhancement with ASP.NET and React</a
    >
  </li>
</ul>
<p>&nbsp;</p>


How to Use Gulp ast ASP.NET MVC 4.5.2 Template.

Gulp ASP.NET MVC 4.5.2 Template and Browserify


<h2>Use Gulp, Gulp Plugins and Browserify to build Angular app</h2>
<p>This sample app use following technologies.</p>
<ol>
  <li>Node.js</li>
  <li>Angular.js</li>
  <li>Browserify</li>
  <li>Gulp</li>
  <li>gulp-connect</li>
  <li>gulp-ng-annotate</li>
</ol>
<p>
  The files structure will be following, also you can check the sample code
  at&nbsp;<a
    href="https://github.com/keke78ui9/gulp_angular_browserify_sample1"
    target="_blank"
    >Github</a
  >. 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
  <code>gulpfile.js</code>
</p>
<pre class="language-javascript">
npm install -d
gulp
</pre>
<p>
  <code>App</code> folder are all the client side file for build angular app.
</p>
<p><code>Gulpfile</code> contains all the client side task build.</p>
<p>
  <code>Index.html</code> is the html page will be request by the client, also
  contains the angular app.
</p>
<p><code>package.json</code> contains all the dependencies for this example.</p>
<ul>
  <li>gulp-test1</li>
  <ul>
    <li>app</li>
    <ul>
      <li>controllers</li>
      <ul>
        <li>controller1.js</li>
        <li>controller2.js</li>
        <li>controller3.js</li>
      </ul>
      <li>views</li>
      <ul>
        <li>controller1.html</li>
        <li>controller2.html</li>
        <li>controller3.html</li>
      </ul>
      <li>app.js</li>
    </ul>
    <li>gulpfile.js</li>
    <li>index.html</li>
    <li>package.json</li>
  </ul>
</ul>
<h3>package.json</h3>
<p>
  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.
</p>
<pre class="language-xml">
{
  "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"
}
</pre>
<h3>Angular App</h3>
<p>
  Following is the example code use browserify with angular, broserify will take
  all the dependencies for angular. For example, following code is the
  <code>app.js</code> at angular.js, which define where is the controller and
  views, in angualr it is useing <code>angular-route</code>, and ofcourse,
  app.js is also depend on <code>angular.js</code>. In Browserify, it is very
  simple to define, you just need to write, <code>require('angular')</code>,
  browserify will take care the dependency for you. Similar to the angular
  controllers, you'll need to define as
  <code>require('./controllers/controller1');</code>.
</p>
<pre class="language-javascript">
'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: '/'
      });
  });

</pre>
<pre class="language-javascript">
'use strict';

angular.module('gulp.test1')
  .controller('controller1', function ($scope) {
    $scope.message = 'controller1!';
});
</pre>
<pre class="language-html">
&lt;h2&gt;message: {{message}}&lt;/h2&gt;
</pre>
<h4>How do I use browserify to bundle all javascript</h4>
<p>
  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
  <code>app.js</code>. It shouldn't contains angular.js angular-route.js, all
  the angular controllers and the app.js itself.
</p>
<pre class="language-javascript">
gulp.task('browserify', function () {
    return browserify('./app/app.js')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/js/'));
});

</pre>
<h3>index.html</h3>
<p>
  In this example, <code>index.html</code> is the actual web page, as you can
  see it is any reference to the minified javascript.
</p>
<pre class="language-html">
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="/js/app.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div  ng-app="gulp.test1"&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
    &lt;/div&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="/#"&gt;home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/#1"&gt;main&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/#2"&gt;main1&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3>gulpfile.js</h3>
<pre class="language-javascript">
/// 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']);
</pre>
<h3><span style="font-size: 14px">References or Links</span></h3>
<ol>
  <li>
    <a href="http://gulpjs.com/plugins/" target="_blank">gulp's plugins</a
    ><small> There's thousands of plugins for gulp</small>
  </li>
  <li>
    <a href="http://browserify.org/" target="_blank">browserify</a> Official
    website
  </li>
  <li>
    <a href="https://angularjs.org/" target="_blank">angular1 and angular2</a>
  </li>
  <li>
    <a href="https://github.com/Pestov/essential-gulp-plugins" target="_blank"
      >Most popular gulp plugins</a
    >
  </li>
</ol>
<h3>Conclusion</h3>
<p>
  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.
</p>


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


<h2>
  You'll often see following error when running npm command at windows OS
  system.
</h2>
<pre class="language-xml">
'Gulp' is not recognized as an internal or external command, operable program or batch file. 
</pre>
<pre class="language-xml">
'Bower' is not recognized as an internal or external command, operable program or batch file.
</pre>
<pre class="language-xml">
'yo' is not recognized as an internal or external command, operable program or batch file.
</pre>
<p>
  Basically you have to add to <code>Path</code> to Environment Variables's
  <code>Path</code>.
</p>
<h3>How to enable gulp?</h3>
<p>
  For gulp, you will have to add following path to Path System Variables, so
  command line will recognize npm's global path. Also install gulp so run
  command as gulp will be recognized. At the end, you'll have to restart the
  command line if you have not restart command line after change the system
  variables.
</p>
<ul>
  <li>Add path to windows System Variables</li>
  <ul>
    <li>%USERPROFILE%\AppData\Roaming\npm</li>
    <li>C:\Program Files\nodejs\</li>
  </ul>
  <li>Run npm install command to install gulp</li>
  <ul>
    <li><code>npm install -g gulp</code></li>
  </ul>
  <li>Restart windows command line.</li>
</ul>
<h3>How to enable bower?</h3>
<p>
  If you already setup gulp, then the only think you have to do is run npm for
  bower as global.
</p>
<ul>
  <li><code>npm install -g bower</code></li>
</ul>
<h3>Git is not recognized too?</h3>
<ul>
  <li>
    Go to windows' Enviroment Variables and edit the the path variables, make
    sure contains following path also make sure following location Git is
    actually exist.
  </li>
  <ul>
    <li>Could be either these&nbsp;</li>
    <ul>
      <li><code>%PROGRAMFILES(x86)%\Git\bin</code></li>
      <li>
        <span style="font-family: monospace">%PROGRAMFILES(x86)%\Git\cmd</span>
      </li>
    </ul>
    <li><span style="font-family: monospace">Or Maybe&nbsp;</span></li>
    <ul>
      <li><code>%PROGRAMFILES%\Git\bin</code></li>
      <li>
        <span style="font-family: monospace">%PROGRAMFILES%\Git\cmd</span>
      </li>
    </ul>
  </ul>
</ul>
<h3>How to enable yo?</h3>
<p>
  It is the same as bower at this point, you will need to install yeoman as
  globally.
</p>
<ul>
  <li><code>npm install -g yo</code></li>
</ul>
<p>
  If you can't install yo and command line display error contains as
  <code
    >If you are behind a proxy, please make sure that the 'proxy' config is set
    properly</code
  >. Try run <code>npm config ls -l</code>, this command will show all the
  config setting for npm, check the proxy, if the proxy is <code>null</code>,
  change it to <code>http://registry.npmjs.org/ </code> as following command.
</p>
<pre class="language-xml">
npm config set registry http://registry.npmjs.org/
</pre>
<h2>Still not working!?</h2>
<p>
  Before trying to figure out what's happening, restart your command line again,
  might works. Also, it is better to use Node.js command prompt.
</p>


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

Category gulp

Gulp ASP.NET MVC 4.5.2 Template and Browserify

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

module is not Recognized as an Internal or External Command