WebStorm minify css - webstorm

I am using closure-compiler.jar to minify my .js files. However WebStorm doesn't give me an option for .css ? How can I minify .css files with WebStorm ?

You can create a second file watcher with 'Cascading Style Sheet' file type and set css specific parameters in the 'Arguments' field.

closure-compiler is for JavaScript only. For CSS you need to install a different filewatcher, such as YUICompressor via npm.

Related

disable prettier plugin for specific directory

In my typescript & svelte project, I use prettier to format codes.
Also, I use prettier-plugin-organize-imports to automatically organize imports.
However, this plugin does not support svelte yet (it kind of works, but it's buggy), so I want to disable the plugin for *.svelte files while enabling it for *.ts files.
According to the official doc of prettier, it seems impossible to do this by adding options to config file (prettier.config.js).
Is there a good way?
You can create a .prettierignore to exclude files from formatting.
# Ignore artifacts:
build
coverage
# Ignore all HTML files:
*.html
Check the docs.

Emmet not working in WebStorm in .php files

I just started using WebStorm. Emmet is working perfectly with .html files, but not with .php files. Any fix for that?
Problem: writing .container + clicking on Tab should give <div class="container"></div>, but it's not doing that in PHP files. In HTML files it's working perfectly.
In WebStorm, .php files are simple text files highlighted using textmate bundles; HTML language is not injected there, so advanced HTML features do not work.
As a workaround, you can try modifying Zen HTML live templates context in Settings | Editor | Live Templates by appending Other to it, like:
but this has to be done for each template separately

How do I set the file mask for find in path only for js or jsx in WebStorm?

I want to use Find in Path only for js and jsx files in WebStorm. I tried to set \*.js\* in file mask but it includes other files like js.map.
I really appreciate any advise how to do this.
You can specify several file types using commas as separators, see https://www.jetbrains.com/help/webstorm/2019.3/finding-and-replacing-text-in-project.html#exclude_type

Pycharm Can not find the reference to external javascript and css files

I am not able to locate my external javascript and css files when I ctrl click their path string.
My html template path is 'bodhitree-flipped/concept/templates/concept/content_developer.html'. And my external video.js file path is 'bodhitree-flipped/video/static/video-js/video.js'.
Any Idea how I make pycharm to locate my js files? I know the solution for this is to run python manage.py collectstatic command which will copy all my asset files to /staticfiles folder but I don't want to do it as it will increase the size of my project by duplicating all the static files.
I tried rebuiding the file index with option under File->invalidate caches/Restart... but unfortunately this also doesn't work.
This is how my project structure look like.
click on the file to see code in settings.py
Any help is deeply appreciated.
I have just changed the python template language from jinja to Django (settings->languages and framework->python template languages)and then invalidated the file cache. It worked.

Multiples assets into one bundle using Flask-Assets

I have couples of CSS files in static directory of my Flask project and couple of SCSS fiels. Now I am compiling SCSS files manualy but I want Flask-Assets do it for me. I know how to prepare bundle of CSS only but is there way to mix into this bundle SCSS filec which must be compiled by filter="pyscss" before bundling?
I'm not sure about the pyscss filter but yes, you can bundle CSS and SCSS files together with the scss filter. The filter will only apply to the relevant files (*.scss in this case.) Working code from one of my projects:
assets.register(
'css_admin',
Bundle(
'bootstrap/dist/css/bootstrap.min.css',
'admin.scss',
filters='scss', output='admin.css'
)
)