Skip to content
This repository has been archived by the owner on Feb 19, 2021. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
Added some extra instructions to the readme to document using NPM Tas…
…k Runner in Visual Studio.
  • Loading branch information
Steve Kennedy authored and Steve Kennedy committed Oct 13, 2016
1 parent 89c2179 commit 79698f2
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 11 deletions.
2 changes: 1 addition & 1 deletion Project_Readme.html
Expand Up @@ -75,7 +75,7 @@ <h1 class="content-title">Step 2: Execute Ionic App Scripts Tasks with Task Runn
Ionic uses <a href="https://github.com/driftyco/ionic-app-scripts">Ionic App Scripts</a> to perform some tasks like Sass to process your source code and produce the output in the <strong>www</strong> folder.
</p>

<p class="content-title-body">Visual Studio 2015 includes a Task Runner Explorer that will show you all the available tasks to execute from the UI. You can access the Task Runner Explorer from the Menu: View->Other Windows-Task Runner Explorer or with the shortcut Ctrl+Alt+Bkspce</p>
<p class="content-title-body">Visual Studio 2015 includes a Task Runner Explorer that will show you all the available tasks to execute from the UI. You can access the Task Runner Explorer from the Menu: View->Other Windows-Task Runner Explorer or with the shortcut Ctrl+Alt+Bkspce. <strong>Important</strong> - ensure that you've installed the <a href="https://visualstudiogallery.msdn.microsoft.com/8f2f2cbc-4da5-43ba-9de2-c9d08ade4941">NPM Task Runner</a> (.vsix) which adds support for npm scripts defined in package.json directly in Visual Studio's Task Runner Explorer.</p>

<p class="content-title-body">
This step is specially important since it compiles the TypeScript code using Ahead-of-Time Compilation and <strong>(<a href="https://github.com/angular/angular/tree/master/modules/@angular/compiler-cli">ngc</a>)</strong>. ngc is a drop-in replacement for tsc and is configured much the same way. So any time you make any modification to your .ts files you should run your task to compile it again. You can also run the <strong>watch</strong> task to enable a Live Reload experience.
Expand Down
17 changes: 7 additions & 10 deletions README.md
Expand Up @@ -13,6 +13,7 @@ A template to create Ionic 2 apps with Visual Studio tools for Apache Cordova us
* [Visual Studio 2015 Update 3](https://download.microsoft.com/download/4/8/f/48f0645f-51b6-4733-b808-63e640cddaec/vs2015.3.exe)
* [Tools for Apache Cordova Update 10](http://taco.visualstudio.com/en-us/docs/install-vs-tools-apache-cordova/)
* [Microsoft ASP.Net and WebTools](https://visualstudiogallery.msdn.microsoft.com/c94a02e9-f2e9-4bad-a952-a63a967e3935)
* [NPM Task Runner](https://visualstudiogallery.msdn.microsoft.com/8f2f2cbc-4da5-43ba-9de2-c9d08ade4941)

## VSCode Requirements
* A recent version of Node/NPM
Expand All @@ -24,25 +25,21 @@ Once you have your first project based on this template/repo created, you should
### Restore Npm Packages
VSCode will depend on you to execute `npm install` from the root folder.

Visual Studio should start the restore process as soon the project is opened, you should see how the Dependencies node in Solution Explorer shows a message saying "Restoring..",
you can always invoke the restore process manually with `RightClick->Restore Packages`
Visual Studio should start the restore process as soon the project is opened. You should see the Dependencies node in Solution Explorer show a message saying "Restoring..".
You can always invoke the restore process manually with `RightClick->Restore Packages`

To verify that the packages are completely restored you can check that the folder `www\build` contains some folders.
> Note. Visual Studio shows the restore log in the Output Window `Ctrl+Alt+O` under the Npm/Bower category.
### Run Gulp Tasks
Ionic uses [Gulp](http://gulpjs.com/) to perform some tasks like [Sass](http://sass-lang.com/), and TypeScript compilation to process your source code and produce the output in the `www` folder.
### Run Ionic App Scripts
Ionic uses [Ionic App Scripts](https://github.com/driftyco/ionic-app-scripts) to perform some tasks like [Sass](http://sass-lang.com/), and TypeScript compilation to process your source code and produce the output in the `www` folder.

Visual Studio 2015 includes a Task Runner Explorer that will show you all the available tasks to execute from the UI.
You can access the Task Runner Explorer from the Menu: `View->Other Windows-Task Runner Explorer` or with the shortcut `Ctrl+Alt+Bkspce`
You can access the Task Runner Explorer from the Menu: `View->Other Windows-Task Runner Explorer` or with the shortcut `Ctrl+Alt+Bkspce`. Ensure that you've installed the NPM Task Runner (.vsix) which adds support for npm scripts defined in package.json directly in Visual Studio's Task Runner Explorer.

>Note: To ensure that the default tasks are executed before the VS build, we configured the Task Runner Explorer binding the default task to the BeforeBuild event, however you can customize this setting to match your needs (e.g. Binding watch to project opened)
To execute this tasks from the CLI you can:

1. Have a global installation of gulp, and run `gulp build`
2. Use the local installed version `node_modules\.bin\gulp build`
3. Use the npm script: `npm run build`
To execute this tasks from the CLI you manually run: `npm run build`

> Note: If VS is unable to show the tasks, you can check the log in the Ouput window under the Task Runner Explorer Logs category.
Expand Down

0 comments on commit 79698f2

Please sign in to comment.