How to trigger LESS/SASS compiler manually in Netbeans - css

In Netbeans 7.4 you can configure LESS or SASS compilers. You can check the option to Compile on Save. That works great. But how can I trigger this action manually from Netbeans? I deleted the destination folder and want to recompile everything but I can't find how.

I believe it is not possible. But perhaps you could try to open project properties (right click on project) and in css preprocessors setting (see here) try one of following:
uncheck the "Compile on Save" option, confirm dialog and the open project properties again and check this option back. It could trigger recompilation
if the above won't help, try to remove all settings in the "Watch", confirm dialog and then enter your setting in the Watch section again

You need to change the paths of the css and less folders in your projects to the correct one. It should be relative to the project folder.
So if you have a folder named assets in the root of your project and inside it 2 folders css and less then their paths in the project CSS preprocessors settings should be /assets/less and /assets/css.
As soon as you correct this your less files should compile on next save

I'm using NetBeans IDE 8.2 in August 2017, and there is a Recompile All Files button in Project Properties > CSS Preprocessors.

Less runs on save in netbeans and there isn't any menu item or shortcut.
If you want to activate the setup on save and you have problems i recommend to delete the less lines in your project.properties file going to the file tab and searching for the file in the nbproject/project.properties.

Related

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

Non-project files with ReSharper (SASS)

I'm running JetBrains ReSharper 8.2 on a project that uses SASS for styling.
I compile my seperate scss files into one file "common.css". This file is not included in the project, but gets compiled on build on the server (grunt + compass takes care of this).
I don't want to include this file, but only my SCSS files in the project. This however causes ReSharper to report a lot of errors ("Unknown CSS class"...) in my views because the file isn't included.
Is there a workaround for this (without disabling css errors in settings)?
I've tried the "ReSharper.ExternalCode" extension (https://resharper-plugins.jetbrains.com/packages/ReSharper.ExternalCode), but without any luck.
Sadly, there isn't a workaround for this. ReSharper doesn't know about SCSS files, and doesn't know anything about files that aren't included in the project, so it can only assume the CSS classes are undefined.
The external code plugin should work and allow ReSharper to process the resulting css file. However, I'm not sure how flexible it is - I think it needs everything to be configured before the solution is opened. That is, it only tells ReSharper about the generated file when the solution is being opened. Configuring things while a solution is open probably won't be reflected immediately (but I haven't tried it). Similarly, it doesn't notify ReSharper of changes to the file, and I don't think that ReSharper sets up any monitoring. So if the file isn't available when the solution opens, or changes while it's open, ReSharper won't have correct information. I'd try and configure it, close the solution and reopen.

VS2012 automatically creates nested css file under sass file and checks out project

I have recently upgraded to VS2012 and have a small issue. All our sass files are checked into source control and the corresponding css file gets generated when the project is built (the css file is never part of source control). with VS2012, as soon as i edit the sass file, a css file is created under the sass file (nested under it) and the project file is checked out. I do not want this as we don't need to check in the css file.
Is there an option i can set to avoid this ? Had a quick look under tools ->options but didnt see anything
The only plugin we have installed is Mindscape Web Workbench free version.
Thank you for any advice.
So the Web Workbench plugin was automatically modifying the project file and including the following under my scss files. This was still present even when i disabled and removed the plugin. There's no option to disable this function in Web Workbench, so i wont be using it anymore.
<Compile>True</Compile>
<Minify>True</Minify>
<CompileStyle>Nested</CompileStyle>
<DebugInfo>False</DebugInfo>
Using SassyStudio now which is nice and simple.Has the option to disable auto css creation and project adding etc.
Hope this explanation can help someone else.

Use script files from another project inside same solution

I'm trying to use some script files between different projects. I have one solution with four projects. In the project "A" I have some scripts like Jquery, Javascript Plugins, etc, and i want to use them on the project "B", by adding a scriptmanager, or anything that works. What can i do this?
I'm using Visual Studio 2010.
Here is a printscreen with my environment.
[EDIT]
Hello, after doing what #CStick says, a have now the scripts in my other project, so a can't add them to a ScriptManager. The problem is path not found on Asp.net code. It cant find the script cause they're placed in the other project. What can i do to solve it?
I know this is old, but for future reader i post an answer.
You will have to use "Link project file" for this.
From the target project, right click on the folder you what the file to be
Select add -> Existing file
Browse to the file you need then click on the arrow at the right of the add button and select add as a link
After this you can modify the file in booth project, but the fille will be only in the source physical location until you publish the project.
This can cause problem for client side file, like script file, on debug because you cant view the file because it's not physically in the target project.
You can use MsBuild to copy the source file on the target directory on build.
(See this answer)
In short, you will create a .targets file then add a reference in your project file.

Configuring *all* JSHint settings in WebStorm IDE

After a somewhat comprehensive evaluation of IDEs for use in front end development, WebStorm leads the pack I think.
The one missing piece is that we can't configure JSHint the way we need to. The WebStorm preferences GUI provides some options, but not the full set. The GUI only lets you configure 15 of the 30 or so actual available options.
This is a problem because we don't want to change our coding practices just because an IDE doesn't let us configure linting the way we want.
Is there a hacky way to go in and adjust the JSHint library behind the scenes for WebStorm?
You can configure all the options you'd like in a .jshintrc file located in the root directory of your project. This will be a project-wide setting.
From https://www.jetbrains.com/webstorm/webhelp/jshint.html:
Use config files
Select this check box to have the code verified according to the settings from a configuration file. A configuration file is a JSON file with the extension .jshintrc that specifies which JSHint options should be enabled or disabled. WebStorm will look for a .jshintrc file in the working directory. If the search fails, WebStorm will search in the parent folder, then again in the parent folder. The process is repeated until WebStorm finds a .jshintrc or reaches the project root. To have WebStorm still run verification in this case, specify the default configuration file to use.
I've been using this for a while and it works great. Plus you can commit it to your repo and ensure the entire team follows the same code style. Also a great place to add globals.
I'm not aware of any hacky way to do it, but you can vote for the existing feature request.
There's a per-file solution that works, but is not ideal. Would prefer an IDE or project-wide fix/hack.
Set JSHint options at the top of your file:
/*jshint laxcomma:true, asi:true */

Resources