File watcher on a SCSS file - html

I'm completely stumped. I have tried to the best of my being to fix this.
I have a SCSS file, that has a watcher on it, but the watcher does not seem to be working. A normal CSS file is not being made at all. Here is my SCSS file:
As well, I am using the WebStorm IDE.
Error message:
An exception occurred while executing watcher 'SCSS'. Watcher has been disabled. Fix it.: Cannot run program "C:\Users\Luke\WebstormProjects\untitled\myTestWebsite\main.scss" (in directory "C:\Users\Luke\WebstormProjects\untitled\myTestWebsite"): CreateProcess error=193, %1 is not a valid Win32 application
Program path:

Your Program should point to the Sass Gem of Ruby instead you are pointing to your scss file. This is not correct:
Find the sass.bat file on your computer and use the path to that file in the program value
in my case the correct path is: c:\Ruby22\bin\sass.bat
Webstorm automatically watches every scss file you create and creates a css file. You do not need to create a file watcher for every independent scss file
Small detail: I should add --style compressed to the arguments. This creates a minified version of the css file and the load time is decreased

Related

How to start compile SCSS to CSS on PhpStorm for example with File Watcher

I have start using SCSS for the frontend, and can setup it correctly with PhpStorm on the a MacBook Pro with Mojave installed.
First I install the npm:
Then I setup the file watcher:
But it does not work. Something what I not seeing here?
If you like the .css files to be generated in the same folder as original file, try the following settings:
Note the Create output file from stdout option - it has to be enabled, as node-sass writes CSS to stdout unless the -o option is passed.
If you like to place generated files in a separate folder, use the -o option:

Incorporating gulp to compile js in apostrophe?

Has anyone rolled gulp into apostrophe for compiling assets? I'd like to use ES6, as I'm using a frontend framework that has all of the js nicely split up into separate assets, and have the compilation of that into one minified file part of the normal apostrophe build process (I'm using apostrophe-assets to reference a single root js file which imports everything else).
Great question. You're going to want to build your JavaScript with Gulp into one file before pushing that file to the browser using Apostrophe's asset pipeline.
For example you might have a /src directory at the root of your project that has your JavaScript files. You can pipe these files into your apostrophe-assets directory or some other named directory that is a subclass of apostrophe-module in /lib/modules/.
You can then push your compiled file to the browser as usual: http://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html#configuring-java-script-for-the-browser

PhpStorm SCSS - File Watcher Setting

I have structure like this:
Where I am trying to setup SCSS file watcher.
Here are my current options:
My goal is to compile
../scss/style.scss to ../css/style.css
../scss/user/profile.scss to ../css/user/profile.css
How to setup my setting in file watcher to achieve this pattern?
If it's possible for your project, consider using compass to compile your scss. By doing it this way, regardless of file structure in scss directory, after compilation
will be this structure mirrored in css directory.
It is quite easy to setup, there is also a good guide to read: PhpStorm / Working with SASS and SCSS in Compass Projects
Basically you need to:
Install compass: gem install compass
cd to public\themes\701 directory and run compass init, configuration file config.rb will be created here, edit this configuration to reflect your directory structure
Enable Compass support in settings:
File > Setting > Languages & Frameworks > Compass
Now setup File Watcher like in picture:
$ProjectFileDir$\public\themes\701 is full path to directory with config.rb file.
This will compile scss files to css directory as requested.

PHPStorm/Webstorm How to have file watcher remove .css if .scss is removed

I am using phpstorm 8.0.3 and I've been using the file watcher feature to compile SCSS to css files. However, when I delete a scss file, the one of the css file is left dangling. In netbeans, it somehow took care of it and deleted the file if the parent file was removed.
Just for testing I set up 2 file watchers. One compiles in place, one is the real file watcher that maps public/scss to public/css
real file watcher
directory structure
dialogue & resulting dangling file

File watcher for Cython in Pycharm

Cython's *.pyx files need to be compiled for it to function with other py files. Because of this, I would like a file watcher for PyCharm just like for *.coffee files and for *.ts files.
How would one create a file watcher for Cython in Pycharm. A step by step tutorial would be greatly appreciated.
The easiest way would be "Compile on Save".
As an example, in Netbeans the "Compile on Save" feature can be enabled via "Build -> Compiling"
As for the python-demon itself, you could start it by using gunicorn, store md5 hash for each file, revalidate them all the time, and rebuild as soon as hash key was changed for the file.