Refined details

Author: Chuxel

tutorial-gulp/gulp-task-runner-explorer.md

@@ -3,9 +3,7 @@
 
 [Gulp](http://go.microsoft.com/fwlink/?LinkID=533803) is an increasingly popular JavaScript based task runner with a large number of [useful plugins](http://go.microsoft.com/fwlink/?LinkID=533790) designed to automate common "tasks" for everything from compilation, to packaging, deployment, or simply copying files around. Both Gulp and the [Apache Cordova Command Line interface](http://go.microsoft.com/fwlink/?LinkID=533773) (CLI) are Node.js based which makes the two highly complementary technologies.
 
-You may find it useful to fire off a Gulp task every time you do a Cordova build particularly when using a Gulp to minify your JavaScript code or compile languages like [TypeScript](http://go.microsoft.com/fwlink/?LinkID=533748), [LESS](http://go.microsoft.com/fwlink/?LinkID=533791), or [SASS](http://go.microsoft.com/fwlink/?LinkID=533792). Fortunately, this is quite easy to do via a "before prepare" "hook." A Cordova [hooks](http://go.microsoft.com/fwlink/?LinkID=533744) enables you to fire off shell or Node.js scripts at any number of different points in the Cordova build lifecycle. In fact, hooks can cover everything from platform or plugin add to compilation and emulation.
-
-The "prepare" step in Cordova is in charge of transforming all of your content in www, plugins, and merges and preparing a native project for a given platform for compilation. The "build" command in Cordova does a "prepare" before moving on to compilation and as a result it is useful to use the "before prepare" hook to wire in pre-build tasks.
+You may find it useful to fire off a Gulp task right from Visual Studio every time you do a Cordova build particularly when using a Gulp to minify your JavaScript code or compile languages like [TypeScript](http://go.microsoft.com/fwlink/?LinkID=533748), [LESS](http://go.microsoft.com/fwlink/?LinkID=533791), or [SASS](http://go.microsoft.com/fwlink/?LinkID=533792). Fortunately, this is quite easy to do thanks to the "Task Runner Explorer." 
 
 ##Using the Visual Studio Task Runner Explorer
 The Visual Studio Task Explorer provides a convenient way to run Gulp tasks right from Visual Studio. First let's install Gulp globally so it's convenient to use from the command line as well as Visual studio. Type the following from a command prompt:
@@ -14,7 +12,7 @@ The Visual Studio Task Explorer provides a convenient way to run Gulp tasks righ
 npm install -g gulp
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Next, create a [package.json](http://go.microsoft.com/fwlink/?LinkID=533781) file in your project. This will be the location you will use to reference Gulp or any [Gulp plugins](http://go.microsoft.com/fwlink/?LinkID=533790) you want to use.
+Next, create a [package.json](http://go.microsoft.com/fwlink/?LinkID=533781) file in your project (if one is not already present). This will be the location you will use to reference Gulp or any [Gulp plugins](http://go.microsoft.com/fwlink/?LinkID=533790) you want to use.
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 {
@@ -24,23 +22,25 @@ Next, create a [package.json](http://go.microsoft.com/fwlink/?LinkID=533781) fil
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-You can install these dependencies in Visual Studio by right-clicking on the Dependencies node in the Solution Explorer and selecting "Restore Packages".
+You can install these dependencies at any time in Visual Studio by right-clicking on the Dependencies node in the Solution Explorer and selecting "Restore Packages".
 
 ![Restore Packages](<media/gulp-4.png>)
 
-If you're updating package.json outside of VS, type the following to install whatever you have added to package.json:
+Note that, thanks to Visual Studio's command line interoperability, you can also update package.json outside of VS and type the following to install whatever you have added to package.json:
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 npm install
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-If editing from the command line you can then update package.json with additional dependencies by hand or use the npm "—save-dev" flag. For example, this will both install the [uglify Gulp plugin](http://go.microsoft.com/fwlink/?LinkID=533793) and add it as a dependency:
+This is what the Task Runner Explorer execute under the covers when you "Restore Packages." In general you should not add the "node_modules" folder that is generated into source control and it is omitted from the Solution Explorer in Visual Studio for this reason.
+
+Similarly, you can update package.json with additional dependencies by hand in Visual Studio or use the npm "--save-dev" flag from the command line. For example, this will both install the [uglify Gulp plugin](http://go.microsoft.com/fwlink/?LinkID=533793) and add it as a dependency:
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 npm install --save-dev gulp-uglify
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Next, create a file called "gulpfile.js" and add it to the root of your project. For example, here is a simple Gulp task.
+Now that we have the needed dependiencies installed, create a file called "gulpfile.js" and add it to the root of your project. For example, here is a simple Gulp task.
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 var gulp = require("gulp");
@@ -49,22 +49,28 @@ gulp.task("before-build", function() {
 });
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-In Visual Studio, open the Task Runner Explorer if you have not already by going to View \> Other Windows \> Task Runner Explorer.
+In Visual Studio, open the Task Runner Explorer by going to View \> Other Windows \> Task Runner Explorer.
 
 ![View Menu](<media/gulp-1.png>)
 
-You will then see the Task Runner Explorer with the before-build task we created visible.
+After clicking the "Refresh" button you will then see the Task Runner Explorer with the before-build task we created visible.
 
 ![Before Build Task](<media/gulp-2.png>)
 
 Now to attach this to the "Before Build" event, right click and select Bindings \> Before Build.
 
 ![Before Build Task Binding](<media/gulp-3.png>)
 
-The next time you run a build this task will automatically fire!
+The next time you run a build this task will automatically fire! You can also execute tasks without binding them to an event simply by selecting "Run" from the same context menu.
 
 ##Supporting Task Runner Explorer Bindings from the Command Line
-By default, bindings in the Task Runner Explorer only work inside of Visual Studio. When working outside of Visual Studio we generally recommend simply running the Gulp tasks directly from the command line. However, you may want to be able to simply assign bindings in Visual Studio and have them apply from builds at the command line or in a team / Continuous Integration (CI) environment. Fortunately this is fairly straight forward to do via a [Cordova "hook"](http://go.microsoft.com/fwlink/?LinkID=533744).
+By default, bindings in the Task Runner Explorer only work inside of Visual Studio. When working outside of Visual Studio we generally recommend simply running the Gulp tasks directly from the command line. For example, this will run the Gulp task we created above:
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+gulp before-build
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+However, you may want to be able to simply assign bindings in Visual Studio and have them apply from builds at the command line or in a team / Continuous Integration (CI) environment. Fortunately this is fairly straight forward to do via a [Cordova "hook"](http://go.microsoft.com/fwlink/?LinkID=533744).
 
 To do so, **[follow these directions to add a pre-built Cordova hook to your project](./hook-task-runner-binding)**. You can then modify it as you see fit to meet your needs. 
 
@@ -76,4 +82,4 @@ To do so, **[follow these directions to add a pre-built Cordova hook to your pro
 * [Visit our site http://aka.ms/cordova](http://aka.ms/cordova)
 * [Read MSDN docs on using Visual Studio Tools for Apache Cordova](http://go.microsoft.com/fwlink/?LinkID=533794)
 * [Ask for help on StackOverflow](http://stackoverflow.com/questions/tagged/visual-studio-cordova)
-* [Email us your questions](mailto:/[email protected])
+* [Email us your questions](mailto:/[email protected])