Pre Build Tasks with Visual Studio Tools for Apache Cordova - visual-studio-cordova

I am using bower.json to install dependencies for an Apache Cordova app created from Visual Studio and was wondering if it is possible to run a pre build task somehow in VS 2015 using the new task runner explorer (or another way) to copy just the minified files from bower_components to www\scripts or if my only option is what is listed here?
If it is possible using gulp, please let me know how starting form the blank Cordova app VS template.

The Visual Studio guidance for using NuGet with Cordova projects actually has something that may help here. That document includes a note about how to setup a before_prepare hook to copy NuGet files into the www folder when building. In Cordova before_prepare is one hook into the build process that is similar to a Pre Build task.

Related

VS 201x - How do downloaded Bower .js files get deployed?

Waffle
I've now been trying to automate and sort out a VS2013, not vNext, ASP.NET MVC project that started life as a front-end project on a Mac by a digital agency!
Aside: I've not yet used VS 2015, or ASP.NET vNext.
It uses npm, grunt and bower but not in the new VS 2015 template project way. We have to manually install the CLI tools and invoke it all manually, and it fails behind our proxy.
No one really understands this stuff or has the appetite to really tackle the problem. We copy files from a share to fudge it into working. It's a mess.
My Question
One of the things that's completely baffling me is how the dynamically-downloaded JavaScript files, via Bower, can be deployed via MSDeploy.
When a deployment package ZIP is created, it only includes content files declared the .csproj file.
In VS2015 there some kind of mechanism that auto-adds the downloaded Bower packages to the project?
Or some other trick?
Is there something that'll do this for VS 2013?
Not exclusive to Visual Studio 2015, but part of the ASP.NET 5 tooling. You can add an array of "prepublish" commands to your project.json that basically become part of the build/publish pipeline. Therefore, ensuring that Gulp, Bower or NPM commands can be run before the MSDeploy publish happens and are ready to be picked up by MSDeploy for publishing.
Reference:
http://docs.asp.net/en/latest/dnx/projects.html#publishing

Visual Studio Tools for Apache Cordova : Update NPM and NodeJS

Hi I installed Visual Studio Tools for Apache Cordova during the winter. I have now worked on an angular project which has npm dependancies, and gulp files which use a Node server to serve pages to test out the app.
I did however like the way VS.Net installed NodeJS and other tools during the Visual Studio Tools for Apache Cordova installation, adding the correct paths to my system to get great CMD support for git, npm etc.
I want to continue to develop Cordova apps using Visual STudio, especially using the Mac remote deployment node module that was installed. However I find that the version of NodeJS and NPM that was installed is now out of date. I got a warning about version numbers when I installed the Azure-cli node package.
What is the best way to update NodeJS and NPM versions so that they stay integrated with Visual Studio Tools for Apache Cordova
There is no specific limitation for updating nodejs, but please be aware of some known issue related to newer version of nodejs. Just make sure you will not run into these scenarios, and I think you can feel free to update.
If you do encounter any issue after you update the nodejs to a specific version, I think it's good to raise the issue and let MS VS team to fix it in future release.
And make sure the nodejs is added into your PATH system environment varaibles.

Update folder structure in VS Tools for cordova to support CLI interoperability (VS2015RC)

I see that VS2015RC support the more cordova suggested folder structure, and CLI interoperability. Are there any docs that describe how to modify existing apps to use this new feature? I've build an app based on this the VS2013 ionic starter template and would like to start using the ionic cli.
Thanks for any suggestions.
Larsi
This documentation describes how you manually convert your existing apps to VS 2105 RC project structure. Let me know if you have problems accessing the documentation.
I don't think the docs for this are available yet, but this post (under Method 2) walks through getting the CLI project into a VS2015RC TACO project...
Using Ionic with Visual Studio Tools for Apache Cordova
In general the steps are...
create a Cordova project using CLI
create a 2nd (empty) project using VS2015 RC Cordova (blank app) template
from the VS project, copy the \merges, .jsproj, and taco.json to the CLI project folder
Open the .jsproj and cross your fingers :)
There is another method I believe, which I have used -
Create a new Blank App using VS 2013/2015
Copy all the contents from your www folder from your existing project and paste it to the www folder of this blank app.
Build and enjoy!

How do we use command lines or Script (msbuild) to build Cordova Project created with Visual Studio Tools for Apache Cordova?

I use Visual Studio to create Cordova projects. I need to build Cordova projects using msbuild and buildbot via script for my project but I can find only information about how VS combine with Cordova CLI to build multi device hybrid application.
Our Visual Studio team has published some tutorials for building Cordova projects using Team Foundation Server 2013 and MSBuild. There may be some pointers in here you could adapt for your needs, if you still need help.
https://github.com/Microsoft/cordova-docs/blob/1d1c0872ac3b2f22301138915efcfa1dd87caea8/tutorial-team-build/TFS2013.md
Are there specific issues you encountered when trying to run an msbuild command from the command line to build a .jsproj project?
Jordan, Microsoft Visual Studio team

How to use nuget package in ASP.NET vNext?

I am giving asp.net vNext a go and have created a new project. I wanted to pull in some dependencies and used NuGet as I usually would. I used it to pull in Require.js for example.
I now have a reference to this under ASP.NET 5.0 in the project references and I can see the path to where it is on my drive from the properties (myUserDrive/.kpm/packages/require... blah)
My question is, how do I use this? - historically it would have added the code to my web project.
For clientside libraries you should now use Bower. The latest previews of Visual Studio 2015 have built in support for NodeJS' NPM packages and Bower packages. It's a bit more complicated but together with Grunt you can do some pretty cool stuff.
Bower has a lot more libraries than NuGet and is more up to date.
For a good intro on all the new things in ASP.NET 5 I advise you to watch these videos on Channel 9: http://channel9.msdn.com/Series/Whats-New-with-ASPNET-5
The second video talks about NPM and Bower packages.
Bower: http://bower.io/ -> Search Packages
Visual Studio 2015 is allowing users to take advantage of popular open-source package management and build tools for processing client-side resources. They suggest using NuGet primarily for managing .NET packages.
The recommendations are:
Package Managers: NPM and Bower
NPM
Use Node Package Manager to install and manage build tools and plugins to compile source into client-side optimized files. NPM files are stored in "node_modules" (hidden in the VS project).
Configured using "packages.json".
Bower
Use the bower package manager to install and manage client libraries like "bootstrap", "jQuery", "angularjs". Bower files are stored in a folder named "bower_components" (hidden in VS project).
Configured using "bower.json".
Build Tools: GruntJS and GulpJS
Grunt
Grunt is a javascript task runner which allows you to setup build tasks to process your source into client-side ready resources. Use NPM to install grunt plugins that allow you to compose tasks (such as processing LESS or coffee files or minifying js and css).
Configured through "gruntfile.js".
Gulp
Gulp is a "streaming build system". Similar to grunt but allows more advanced streaming tasks to be defined. Use NPM to install gulp plugins that allow you to compose tasks (such as processing LESS or coffee files or minifying js and css).
Configured through "gulpfile.js".
Visual Studio 2015 provides some built-in support for these tools, including autocomplete for package names and version numbers. Visual Studio will check to make sure your packages are installed and up-to-date when you open the project. Finally there is the "Task Runner" UI which allows you to run grunt or gulp tasks manually or configure them to trigger on certain events.
This following post gives an introductory step by step guide to using these tools in Visual Studio 2015. Beyond that you should be able to search on NPM, Bower, Gruntjs or Gulpjs to find intro videos or blog posts to help you become more familiar with each.
http://www.asp.net/vnext/overview/aspnet-vnext/grunt-and-bower-in-visual-studio-2015

Resources