Is there a possibly way to install sass singularity in VS Community 2015?
I had the same problems and had to do some digging around to find the solution. So I'll explain my steps (This may not be the correct or best way, but it works, I have been using it and adding to it without problems so far over the last week or so).
As a quick aside, visual studio (at least from 2013 onward and certainty 2015, cause that's what I use) does support bower, grunt and gulp as far as I know. I just don't know how to use these systems. So there may be a faster, more robust, and better way to do this.
To save you time later, you will need to follow the steps below to download the Breakpoint library because it seems the singularity library has a dependency on it. But it's the same steps.
Go to the GitHub repo and download the repository as a zip file and extract it.
In the case of breakpoint go into the stylesheets extracted folder and copy and paste them into a folder you created inside your project.
While doing this create another folder and do the same thing with Singularitygs (it has the same stylesheets folder).
In your visual studio project click show all files and include both these new folders - this will have the effect of including all the files within them.
Goto extension manager and download the free Web Compiler (part of the web essentials toolkit). This gives VS the ability to do all kinds of cool stuff with cool files such as automating the process (without any extra setup) of transforming your SCSS files to CSS. You may need to restart VS after installing it.
Finally - create your own .scss file, and at the top add these includes:
#import '../_breakpoint.scss';
#import '../_singularitygs.scss';
You'll need to use VS intellisense help to ensure you are pointing to the correct folder locations for your setup.
Once they are included you can work away like normal on your .scss using all the new library functionality.
This seems to be the process for installing any .scss / less library in visual studio. But I'm surprised I did not see any info around about how to do it. I had to spend a while digging through the code of all 3, especially web essentials, to figure it out - only to find out that I did not need to even look at the code at all. :)
Hope this helps.
Related
I'm an old COBOL programmer that has self-taught myself web development over the last decade. I've always used asp.net for developing and when I first started out I had no clue what I was doing. There are some cases I still don't :). That brings me to my question. When I first started out I didn't know what Nuget packages were so if I wanted to use something like bootstrap I would would download the files from the bootstrap website and load them into my project in a Scripts folder. To call the files I added them into the bundling function provided by asp.net. I've since discovered Nuget Manager and keep my bootstrap versions updated through it, but I've always been afraid to remove the reference to these files from the bundling package.
Today I'm trying to upgrade bootstrap from 4.6 to 5.1, but I'm getting an error. If I go into my bundling package and comment out the reference to bootstrap my error goes away. So my question is, if I'm using Nuget to manage my packages, is it safe to remove them from the bundling package? I feel like the answer is "yes it's safe" but was hoping for confirmation and maybe an explanation on how and if Nuget and bundling work together, if at all...
Well, nuget simple in "most" cases downloads some .net .dll's and assemblies, and then often sets a reference for you. (you could do this manual, but hey its a whole lot less work).
but, when you use nuget to install those packages, some might include javaScript libries and code (such as your example).
Because the bundling expects the scripts to be say in this location:
Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
bundles.Add(New ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
etc. etc. etc.c
Then of course, when you nuget a package, then the location of the scripts VERY LIKLEY is not going to be the above location.
So, you would then remove your older scripts (and above script referances), and add in the new location of such scripts.
So, you are free to remove the existing bundling references, but you not then enjoy use of the script manager and system to "merge together" the many script files.
So, you don't have to use bundeling anyway.
However, in most cases, you WANT BOTH the SomeJava.js and SomeJava.min.js files to exist. And if you modify those files, then YOU need to regenerate the .min version. Since you not (likely) to be modifying those .js files, then you can well dump the bundling of such files. But you are free also to add them to the above bundling reference.
All bundling does is "merge" the .js files together - so that you don't have 50 or 100 different separate .js files, and thus 50 or 100 difference downloads and references in a web page to use all those many .js files.
So, it not a huge deal. If you only adding say bootstrap via nuget, then I would hunt down the location of the new .js files, and add them to the bundling. But, it not all that huge of a deal if you don't. The issue then becomes how do you add the new .js and .css files to the given web page you are working on. (and toss in use of a master page, and again more complex).
So, in theory, you could remove the existing (older .js references) and then add the css. files that nuget created. I not looked, and don't know if the .js files remain in "packages" folder, or during an install that nuget copies to some folder (such as scirpts).
Just keep in mind, do keep and have the .min versions of those .js files. if you in web.config set debug=false, then the web site flips over to using the .min versions of the .js files - they have to exist, and even without bundling they have to exist, and this "flip" occurs (you now using .min versions of js files).
This is a HUGE topic, and probably oh so far beyond that of a simple post on SO.
but, suffice to say, you can well dump use of the bundling, and remove your older .js references. (but, since you having to do that, then might as well add the newer references then at that point in time, right???).
We plan on using SASS instead of plain CSS for our SharePoint project very soon. While testing and trying to set everything up, I ran into some problems:
We're using Visual Studio 2015 and on my developer machine I installed the Web Compiler Extension to compile the .scss-files and partial files to a regular .css-file.
That worked very nicely but the problem is, that there will be a few developers working simultaneously on the styles. I want to avoid merging the resulting css-file each time someone tries to check in something into source control (we're using Team Foundation Server).
Since there is a build running every time someone is checking in their changes, and to deploy the resulting solution to the nightly build machine, the idea was to somehow include the SASS compiler in the build definition. This way the more readable scss-files get merged and the build creates the resulting css-file to include it in the solution.
Maybe I'm thinking too complicated, but I just couldn't get that to work so far.
Any ideas how I can achieve that?
(Maybe I should also mention that none of the dev machines got any internet connection)
If you're building an MVC app, you can use MVC's bundling feature along with the SASS NuGet package. And, be sure to enable minification. There's a UseNativeMinification property on SassAndScssSettings. That way you don't need to deal with merging the css file when you get latest or check in. Reference this thread: SASS/TFS best practice
Another way is running a script (e.g with PowerShell task) on the server that to install the gulp components and then call the sass compile task to compile the SASS. Refer to Powershell build - compiling SASS for details.
I've set up Web Essentials 2013 (in Visual Studio 2012) and loaded in the default Twitter Bootstrap LESS source files. Auto-build and minification is working perfectly, except Web Essentials quite overdoes the job. When I select "bootstrap.less", make a change and save it, Web Essentials creates a new "bootstrap.css" as well as a "bootstrap.min.css" with everything inside I need. But when I edit e.g. buttons.less, it creates a buttons.css (and buttons.min.css) too (with all the includes and mixins). Which means, in fact, I'll have nearly the same css files over and over again under different names.
Can I declare certain files to be ignored on save?
There is a convention in Web Essentials that if the name of your less file starts with an underscore (like _utils.less) it will not be compiled to css on save.
https://webessentials.uservoice.com/forums/140520-general/suggestions/3319359-don-t-compile-nested-less-files
Okay, I figured it out.
What I initially wanted was LESS compilation on build, Web Essentials was so kind to do this on save. To deactivate this, in Visual Studio 2012 head over to Tools -> Options -> Web Essentials -> LESS and deactivate "Generate CSS file on save".
According to the Visual Studio Extension page for Web Essentials, minification on build works not by now, but will on future releases. I have to delete the .min.css files by myself and create it again on every build as it seems. :(
Pro-tip for every dev:
If you use any framework, tools, extensions etc. and your new super-powers don't work as expected, don't blame the extension, shut up and do it yourself.
Although what #corvuscorax says is absolutely true what I do (if you don't like the idea of starting your file names with an underscore) is to create a folder starting with a #
This seems to stop webessentials from compiling your less.
Note that Visual Studio won't let you create a folder with a starting hash so you will have to create it using your Windows Explorer and then add it to your project via visual studio.
For ignoring only files, you can use underscore at the file name.
Web Essentials has an internal convention whereby files beginning with an underscore will not be saved to CSS.
This is actually quite useful. You don’t want your variables.less or mixins.less files being saved as variables.css or mixins.css. So in this case, name them _variables.less and _mixins.less. They will be compiled (and thus checked for correct syntax) but won’t take up space on disk or in source control as redundant CSS files.
https://medium.com/#brendaningram/web-essentials-not-saving-css-files-a450b8c2d23a
There is a way to keep your filenames and prevent WebEssentials from compiling your LESS at the same time. Create .weignore file with filenames or masks for ignored files as described in the docs.
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
I'm using the N2 CMS system for ASP.NET. Well I say 'using', I'm really just trying to develop a tiny understanding of it.
One of the things that's obstructing me is that it's set up in a way I've not seen before. Where are the codebehind files for the pages?
Can anyone tell me for example, where is the code for /Edit/default.aspx? How on earth do I debug what it is doing?
Thanks
David
It always used to be in N2.Edit.dll, but by the look of it they've rearranged this in more recent builds - I'm not 100% if it's now in N2.Management.dll or in N2.dll itself.
As usual the easist thing to do is to get hold of the source code (or an SVN checkout of the correct version), build it yourself and then replace the DLLs you were using with your built versions and their PDBs - you can then step into these correctly. You might want to go back to the regular releases for deployment, though.
If it's still Edit/default.aspx for you then I guess you're on the 1.5 code or thereabouts? In that case N2.Edit is built from src/wwwroot in the source code. You can just drop the entire src/wwwroot/Edit directory into place in your app and run it from the codebehind files there, not a compiled N2.Edit - that's easier to tweak, although I think it was easier to step through using a built DLL.
You may have to hunt around the build tree for all of the DLLs - I don't think they all get copied into one place. I used to take the DLLs from the N2.Edit.Tests project bin directory, and N2.Extensions and N2.Security from the N2.Extensions.Tests bin directory.