Visual Studio Team Services Compile LESS scripts during build - asp.net

I'm deploying an ASP.NET Web Application to an Azure Website using VSTS's Continuous Integration. Everything works great except compiling LESS files.
I looked through the build steps and I couldn't find anything specific to LESS. Is there any documentation on how to do this?

It's pretty easy actually. You just have to set it's build action property to "content" and everything should be good to go.
If that doesn't do the trick, I found this blog post detailing another method to try (note that I haven't tried this technique myself yet):
In Visual Studio, open the properties of your web project, go to the "Build Events" section, and the in the section "Post-build event command line", insert the following line:
$(SolutionDir)\packages\dotless.1.1.0\Tools\dotless.Compiler.exe -m "$(ProjectDir)\content\*.less" "$(ProjectDir)\content\*.css"
Every time the project builds, this command will compile any .less file in the \content folder into a corresponding .css file, minifying it as well (with the -m switch).
Here is the post that contained this information:
http://tech-journals.com/jonow/2011/05/13/using-less-css-with-asp-net

Related

ASP.Net Core doesn't find cshtml

UPDATED
I refactored the entire question, because now, I Know what are happening, Thx to Daboul
When I start the ASP.Net Core exe inside the VS15 or even on a cmd line with dotnet run it's work fine, but when I try to double click on the exe to run, it's doesn't find the .cshtml.
The weird part, is that the files are there, and are found when executed by vs15
Can someone explain to me what I'm doing wrong?
I just create an Asp.net Core Web App and changed the project.json to produce the .exe like here and here
Visual Studio and dotnet run run your application in the folder where your code exist. It means it can access the Views folder and the .cshtml files you are editing when you are coding.
However when your run your .exe application, you do it from the publication folder, for exemple ...\Visual Studio 2015\Projects\MySolution\src\MyProject\bin\Debug\netcoreapp1.0\publish I would advice you to go to this folder and check that the folder Views exist. If it does not, it means you just need to publish your views by adding "**/*.cshtml" in your project.json:
"publishOptions": {
"include": [
"wwwroot",
"**/*.cshtml"
]
}
Then publish again with dotnet publish or your previous method. It should fix your problem.
Just for knowledge: It is now possible to precompile all the views with .NET Core 1.1. It means there would be no need to publish the .cshtml files.
You can see that one is running in development (the one working) while the other one is running in production. You should first try to remove this difference, see if it fixes the issue. I use a MYEXE_DEV.bat file to do that:
setlocal
set ASPNETCORE_ENVIRONMENT=development
yourbinary.exe
endlocal
Give it a try.
UPDATE:
Ok, let's try to move forward a bit then. When you launch you app by pressing F5 in Visual Studio, VS usually (it might depend on your template I guess) uses a launchSettings.json file with several launch profile, for instance below I have two predefines profiles IISExpress and WebApplication1, and in the .json file you might have parameters that explain why it's working under VS, but not when just double clicking on the exe.

exclude folder in project.json

in the new asp.net 5 template there's a project.json in which you can exclude certain directories.
"exclude": [
"wwwroot",
"node_modules",
"bower_components",
"dist",
".tmp"
]
As you can see, I added a few folders like 'dist' and '.tmp', but they are still included in the solution explorer. There's not much documentation about this. How to exculde files/folders from your project in vs 2015?
The "exclude" property does not hide the folder from visual studio, it will not make the folder "disappear" from the solution explorer.
The "exclude" property removes the folder from the compilation search path. It is an instruction to the compiler (Roslyn) not the IDE. As a more comprehensive answer "project.json" is intentionally IDE agnostic. That is why there is both a projecname.xspoj and a project.json which both contain project configuration information. This is necessary to allow for more robust cross IDE and cross platform development.
You can verify this behavior yourself with a simple excercise.
Add a new class file (buildfail.cs) to your existing project (or
create a new project) in the root project folder.
Ensure buildfail.cs has the same namespace as the other source files in the
project, contains compilation errors, and is in the root directory.
You should see build errors in VS. If you don't manually build.
Create a new folder (excludeme) off the project root and move
buildfail.cs to that folder. You should still have build errors.
Add excludeme to the exclude property in project.json. The build errors should be removed because builfail.cs is no longer in the build search path.
You may be wondering what is VS using to know to hide the node_packages folder from the Solution Explorer display. I am unsure and it may not be user configurable but it isn' the exclude property. Comment out node_packages in project.json and you will get build errors (package restore failure) but the folder will still be hidden from Solution Explorer. Since this is IDE specific behavior one would assume that maybe it is defined in projectname.xproj but I found no such property so at this time it would appear to be black box magic by VS.
As of Asp.Net 5 beta-8 and complementary tooling update to Visual Studio 2015, you are now able to exclude/hide folders from being displayed in solution explorer. More information about this, and other changes are outlined in the announcement post. To hide a file or folder, right-click to bring up a context menu and select Hide from solution explorer. This creates an entry in the .xproj file:
<ItemGroup>
<DnxInvisibleContent Include="myhiddenfile.txt" />
</ItemGroup>
Note also that there has been a change to where bower packages are installed by default. Previously, the Asp.Net 5 templates in Visual Studio would install bower packages to a folder called bower_components, a practice familiar to web developers who do not use Visual Studio. However, apparently due to developer confusion, this has been changed to wwwroot/lib. This can be changed by editing the bowerrc file. As such, the bower_components folder does not exist in the new beta-8 templates. Please see this post by Scott Hanselman for more information.
It may not be ideal, but I was able to hide a folder from the solution explorer in an Asp.net 5 project by marking the folder as hidden in the windows explorer properties dialog. I had the .idea folder used by WebStorm showing up so it being hidden was not too big a deal. WebStorm doesn't mind.
It seems like the folder will not be hidden if it is already in the solution explorer. Mark it and it's contents hidden and move it temporarily out of the project folder. Make sure it disappears from the solution explorer before moving it back. It should not show back up. A restart of Visual Studio may also work, I didn't test that.
Rightly or wrongly, here's what I did to get bower_components and .sass-cache out of the way. In my case, node_modules was already excluded from my project somehow, even though it's at the same level with gruntfile.js. I still don't understand why it is treated differently. Anyone know?
First, I set my location like this in the .bowerrc file:
{
"directory": "../../artifacts/bower_components"
}
Then I adjusted my paths as necessary in my gruntfile.js
Also, To get the sass-cache folder out of the way, since I was using grunt-contrib-compass, I configured my compass task with this option:
cacheDir: '../../artifacts/.sass-cache',
There are other ways to do this if you are using other sass / compass tools.
RESULT:
I can now search my entire project for text and not get hits in my libraries.
bower_components and .sass-cache are out of reach of source control.
With the latest Visual Studio you just need to right-click the folder/file and chose "Hide from Solution Explorer".
That will change the "xproj" this way:
<ItemGroup>
<DnxInvisibleFolder Include="wwwroot\" />
</ItemGroup>
Looking at the state of asp.net 5 with visual studio 2015 I can only say that they made it much more difficult and inconvenient to work with task runners like gulp or grunt. Since I'm using Web API 2 to manage my data I switched to Visual Studio Code with bower, gulp and browsersync and this has proven a to be LOT easier and faster with much less clutter.
To make a startup template: https://github.com/Swiip/generator-gulp-angular
Now you can use any editor and you get a clear separation of front end and back end development. Plus you get to know gulp and bower and the (minimal) command line stuff which VS2015 tries to do for you (and fails to do so many times).
Oh yes: you don't have to exclude folders anymore, since the template has a much more sensible folder structure

VS2010 Automatically rebuild minified .js/.css files

Problem:
I have been trying to integrate minification of javascript and css files in our VS2010 (.net 4.) projects. From what I hear, .net 4.5 and VS2012 will have minification build into the editor, so it will be as easy as setting a flag it will work. Unfortunately we are sill on VS2010 (.net 4.0).
Let me explain what I want to do and what I dont want to do.
I dont want to do big setups with classes/config file(s)/etc just to minify because all that stuff will have to be loaded on our build machine and even the build xml files might have to be modifies to make it work. Also, once we go to vs2012 and .net 4.5 all these configs/classes/etc will have to be discarded because vs2012 will have the build in functionality.
Here is what I think might be the best option. Since I am using the ScriptManager and it can already pull either a .debug.js (non-minified) or a .js (minified) script based on the build type, it seems all i need to do is to have some sort of (pre?) build event that will re-build a non-minified .js file into a minified one. Obviously the build event will have to call a minication module which would have to be installed on local computer (the YUI Compressor seems very nice). The module would update the minified .js file.
I have been reading about this, but I am getting a little bit lost. There are a lot of third party tools with bunch of setup and classes which I do not want to add.
Did anyone do something similar as I explained about?
If not what is the next best simple solution?
(By the way, if you are going to say move to VS2012/4.5, thats not a solution for us at this point)
Solution:
Thank you Parv Sharma for your answer.
I would just like to explain what I did so that it may help someone in the future.
I installed the Microsoft Ajax Minifier
Created a batch file to add minifer to ENVIRONMENT PATH variables: setx path /m "%PATH%;C:\Program Files\Microsoft\Microsoft Ajax Minifier"
Added the following pre-build events into my project:
ajaxmin $(ProjectDir)Script.js -out $(ProjectDir)Script.min.js -clobber
If Script.min.js does not exist, it will be created by the build event, but it will not be added to the project (not sure how to do that through the events).
When you add a new script file, mynewscript.js, just create a second blank file called mynewscript.min.js and add an pre-build event for it.
Using this approach the only thing you have to do to the build machine is run the Microsoft Ajax Minifier setup package and the batch file. Thats it everything else will be part of your pre-build events.
what you are looking for is probably this
http://ajaxmin.codeplex.com/documentation
by using this you would be able to use this third party tool as the minifier
after downloading the tool you have 2 options
1. edit the MSBUILD file to include building the js as per build event
OR 2. to attach this tool to VS and assign a key compbination to it.. this way you would be able to minify whenever you want just like we do F5 OR Cntrl-Shift-B
Attaching to VS is easy just to to external tools and in the Tools menu and add this tool with the required params

Build Process in TFS 2010

I have read articles on build automation and it looks simple, but I am really not sure about parameterized build. I believe, there must be a xml file for that.
When we say build is automated, I believe it means our code/binaries sit in test environemnt. And all application related settings will also configured just by simple clicks of build, and push.
What are the required tools? What is MSBuild ?
Please put some light on it.
MSBuild is and exe that you run with command line tools and pass to it the project file (.csproj) which is an XML file as you said and it has all the instructions needed as you configured.
I created a series of videos that describe how to create simple MSBuild tasks and how to organize tasks and so on, for more info click on the following link:
MSBuild Tutorial
MSBuild is exe
When you run MSBuild from Command line
You will need to unload the projct so you can edit the (.csproj) or project file
The (.csproj) or project file
You are asking about build automation, and by your tags you menation TFS 2010 if so then you only need a cursory understanding of msbuild to get started. It is what eventually calls the compiler, but in all hoensty you need the step above it which are the build templates and defintions, along with how to set up agents and controller.
Here is a good overview document by Martin Woodward, this should give you enough to figure things out, or ask more specific questions

How can I compile Asp.Net Aspx Pages before loading them with a webserver?

It's really annoying that visual studio hides typos in aspx pages (not the code behind).
If the compiler would compile them, I would get a compile error.
Compile the pages at compile time. See Mike Hadlow's post here:
http://mikehadlow.blogspot.com/2008/05/compiling-aspx-templates-using.html
Go to your project properties. Go to the Build Events tab.
In the Post-build event command line: text area, write this (for .NET 4.0):
%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_compiler.exe -v / -p "$(SolutionDir)$(ProjectName)"
Resharper will catch errors in code ofASPX pages, all without compiling. works well imo, and better than later compiling.
EDIT: Resharper also has a Solution wide error checker. 'Resharper->Windows->Errors in solution'. It will analyze your entire solution and give a consolidated list of everything it finds, INCLUDING aspx files.
It is my belief you should always compile ASP.NET applications. There are a few instances where my clients requested otherwise. In Visual Studio, when you choose to publish your website, there is an option to have it compiled. Here is Microsoft's MSDN article which offers their information on compiling sites.
http://msdn.microsoft.com/en-us/library/ms178466.aspx
HTML issues and such will show up as "warnings" and not errors. So, you'll have to check the logs.
There is the possibility to precompile the whole web: usually the pages only get compiled, if they are used.
To precompile the web, please refer to MSDN

Resources