Stop PhpStorm file watchers running recursively (with Autoprefixer)
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"
PHPStorm File Watchers SCSS to Prefixed and Compressed CSS File
Sass is already pretty good at compression. Just execute your Sass compilation with a --style flag liked compressed
. Ex:
sass --watch [your files] --style compressed
If you must handle the prefixing through PHPStorm, you'll need to look into their build tool Phing: http://www.jetbrains.com/phpstorm/webhelp/phing-build-tool-window.html
However, Compass (http://compass-style.org/install/) (a Sass add-on) has a large ecosystem of add-ons, one of which is AutoPrefixer: https://github.com/ai/autoprefixer#compass - a post-processor which adds the vendor-specific prefixes to CSS.
PHPStorm - Run Filewatcher on existing files?
- Select such file(s)/folder(s) in Project View panel
- "Help | Find Action" (Ctrl + Shift + A), activate check box for better results
- Search for "
run file w
" (without quotes, obviously) and choose Run File Watchers entry
Alternatively:
- "Settings | Keymap"
- Find that Run File Watchers action (under "Plugins | File Watchers" branch)
- Assign some custom shortcut
- Select desired file(s)/folder(s) in Project View panel
- Use that shortcut from step 3
Alternatively:
- "Settings | Menus and Toolbars"
- "Project View Popup Menu" branch
- Find desired location and click on "Add After..." button
- Locate Run File Watchers action (it's under "Plugins | File Watcher" branch) and click on "OK" button
- The action is now accessible via content menu in Project View panel and can be used on desired files and folders.
Less File Watcher creates empty files in PhpStorm
Uncheck Create output file from stdout
in Advanced Options
of your File Watcher
PhpStorm: how to add watcher on 1 JS file only and not on ALL JS files?
Use Scope
field to limit the watched files: create custom Scope that will include only desired file(s) and/or folders and use it there in File Watcher.
Scope can accept both "include" and "exclude" patterns at the same time so it's very flexible in filtering the files.
The same approach for your second issue -- use scope to not to process already processed files.
For example: https://stackoverflow.com/a/24938053/783119
The alternative to having 2 separate File Watchers is creating some batch/shell script that will do that minification + obfuscation and use it as a program in File Watcher.
Another option -- use build tools (Grunt/Gulp or alike) and call appropriate task there.
PhpStorm file watcher for individual files on remote hosts
remote file watchers are not supported, please follow WEB-9724 for updates
File Watcher Tool JetBrains IDE - CSSO Setup - Auto Minify CSS
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 Topics
Example of Selector Grouping and Contextual Selector on CSS
CSS 3 Column Liquid Layout Dynamic Same Height Column
Font Weight with Google Fonts Roboto, Normal (400) and Bold (700) Work, Light (300) Does Not
Bootstrap Grid Columns Not Stacking
Print Contents of a Modal Popup
Dynamic Styles for Gwt Celltable Cells
Textbox Background Image Pushing Out in Ie 6 & Ie 7
Why Position Sticky Is Not Working If Followed by Position Absolute Element
Css: How to Adjust My Font Size Fill All the Space in a Justified Layout
Equal Height Bootstrap Cards Within Slick Carousel
Less CSS Retina Media Queries Without Redundancy
The Old Center a Image in a Div Issue ( Image Size Variable - Div Size Fixed )
How to Get the Same Object with a Class in SCSS
Hover Property in CSS Doesn't Work When I Have an Inline Styles