I'm trying to use the File Watcher tool in the Jetbrains IDE (Webstorm and Rider) to automatically minify my .css files and generate .min.css files for them on the whole project.
Thing is, it keeps minifying files that already have .min.css as the extension. So I end up with files like slick.min.min.css. I can't find any option to control what the criteria is for matching files. Is there some option to force it to ignore .min.css files, so I don't get duplicates?
I was following this guide here: https://www.jetbrains.com/help/idea/compressing-css.html#ws_css_compress_create_file_watcher
with some tips from here How to Minify CSS with SCSS File Watcher in PHPStorm IDE
As .min.css files are still CSS files, your watcher listens to changes in all them ( because watcher Scope == Project files, File type == CSS) and produces the output.
As a workaround I can suggest excluding minified files from watchers processing:
create a new scope (Settings | Appearance & Behavior | Scopes) with minified files excluded (like file:.css&&!file:*.min.css)
choose this scope as your file watcher Scope
Related
I have a folder with Less files, split in parts to have a cleaner workspace. But I want them to be compiled by PhpStorm to 1 file (styles.css in a css folder). I installed lessc and it compiles the files separate. See picture 1
As I said I would like to have all files combined into css/styles.css But I don't get this configured right. My configuration is as followed:
I hope someone can explain what arguments I could use.
When Track only root files option is enabled in Less file watcher settings, file watcher produces a single .css file with name matching your "main" .less file (the one that imports all your "partials") that includes the merged content of all your .less files. No individual .css files for partials are created
I have the following file structure:
--public_html/
- css/
- less/
- _mixins.less
- _variables.less
- _theme.less
- main.less
I am using PhpStorm with a File Watcher running LESSC from NPM.
My file watcher is as follows:
Program: /usr/local/bin/lessc
Arguments: --no-color $FileName$
Output paths to refresh: ../$FileNameWithoutExtention$.css
Files:
main.less:
#import "_variables.less";
#import "_mixins.less";
#import "_theme.less";
_theme.less contains my stylsheet and _variables.less and _mixins.less are all pretty self explanatory.
When I modify and save main.less The file main.css is created in the css folder as it should.
However, when I edit my _theme.less file, LESSC creates a _theme.css file, also.
How do I stop these extra files being created?
If you need any more info, please ask.
Please ensure that Track only root files option is enabled in that particular File Watcher settings -- it does just that.
From https://www.jetbrains.com/help/phpstorm/2016.3/new-watcher-dialog.html#d199014e291
When the File Watcher is invoked on a file, PhpStorm detects all the files in which this file is included. For each of these files, in its turn, PhpStorm again detects the files into which it is included. This operation is repeated recursively until PhpStorm reaches the files that are not included anywhere within the specified scope. These files are referred to as root files (do not confuse with content roots).
When this check box is selected, the File Watcher runs only against the root files.
When the check box is cleared, the File Watcher runs against the file from which it is invoked and against all the files in which this file is included recursively within the specified scope.
I've a PhpStorm file watcher running autoprefixer. However the file watcher runs recursively. I think this is because it generates a new css file which the file watcher then runs on.
Is there a way to force them to run only once?
I think I need a scope of Project files because I am not directly editing the css file, instead I have a SCSS file that creates a CSS file which should then be auto prefixed. My settings are shown below.
You have to:
create custom scope (Settings | Scopes .. or by clicking on corresponding "..." button in File Watcher);
[optionally] include desired files (e.g. *.css) -- not really required as "File Type" field of File Watcher already covers it
exclude already modified files (*.min.css)
Now use that scope in your File Watcher instead of default "Project Files"
Excluding directories from the Scope using a custom scope also works. This example is from a Symfony2 project.
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder
I'm using the Yeoman stack to bootstrap an application and had a question on how CSS files should be handled. (I've uploaded a sample on Github : https://github.com/ddewaele/jQueryDataTablesGrunt)
The basic question is : How do you go about handling different CSS files
during development (when running grunt serve)
when packaging the app (when running grunt build).
I have installed a number of libraries through bower that come with CSS files.
For example the jQueryDataTables library has the following CSS
bower_components/datatables/media/css/jquery.dataTables.css
Now, the way I understand it is that I should never reference this jquery.dataTables.css file directly in my index.html (I hope this assumption is correct).
My index.html should only contain
<link rel="stylesheet" href="styles/main.css">
I assume that this styles/main.css will be generated by the grunt workflow and will be correct both in dev mode, as well as in dist mode.
I'm puzzled by a couple of things
How should I tell grunt that I need to include for example bower_components/datatables/media/css/jquery.dataTables.css
Do I do need to reference that jquery.dataTables.css in my index.html, or in my Gruntfile.js, or simply drop it in app.styles ?
How does grunt decide what CSS files it needs to assemble into a single main.css
How does grunts behavior differ between grunt serve and grunt serve dist
Here's what I found :
grunt serve
When calling grunt serve , a CSS file is generated called .tmp/styles/main.css,
That is in fact the CSS file that is used by the app when it launched by 'grunt serve'.
That main.css file only contains stuff coming from the app/styles/main.scss file.
Other CSS files that are put in app/styles/ are not being picked up by grunt serve.
grunt serve:dist
When calling grunt serve:dist, a CSS file is generated called dist/styles/2314bw1.main.css
That is in fact the CSS file that is used by the app when it launched by grunt serve:dist.
That main.css file contains everything that it found in app/styles/*.css,
So the basic issue is that when running grunt serve , the generated main.css does not all the classes from all the css files found in app/styles/*.css.
However, when packaging the app grunt build or grunt serve:dist, it does contain all classes from all the css files found in app/styles/*.css.
How do I configure my app / grunt to use these external CSS, and how do I get to a situation that works during development, as well as during packaging.
I'm not familiar with Yeoman but it look likes it's running gruntjs underneath. You can edit the tasks to include plugin specific styles.
This is your gruntfile.js
How does grunt decide what CSS files it needs to assemble into a single main.css ?
Drop your plugin specfic styles inside "app/styles". You can give it a special folder if you want to. Then add to your main.scss. Sass will compile everything down in the main.css.
First in console:
cp jquery.dataTables.css jquery.dataTables.scss
Then add the import into main.scss
#import "jquery.dataTables"
How does grunts behavior differ between grunt serve and grunt serve dist?
serve:dist does this(see code below), it builds your files, opens a link to your server, creates a dummy webserver to serve your files using connect
if (target === 'dist') {
return grunt.task.run(['build', 'open:server', 'connect:dist:keepalive']);
}
serve on the other hand watches changes to your files.