I'm using pug/jade watcher with the following "Output paths to refresh": $ProjectFileDir$\html\$FileNameWithoutExtension$.html. This should save the output in /html but for some reason it saves it next to the jade file.
You need changing Jade watcher arguments accordingly:
Arguments: $FileName$ --pretty --out $ProjectFileDir$/html
Working directory: $FileDir$
Output paths to refresh: $ProjectFileDir$/html/$FileNameWithoutExtension$.html
Related
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:
In WebStorm don't work Pug's argument "--pretty"
HTML file looks like:
But I want:
Please advise what to do?
I do not want to write on the command line
pug --watch --pretty ./pug/ --out ./html/
I want to make the default setting.
Works fine for me when using the following setup:
Arguments: $FileName$ --pretty --out $ProjectFileDir$/html
Output paths to refresh: $ProjectFileDir$/html/$FileNameWithoutExtension$.html
the file in your screenshot doesn't seem to be produced by a file watcher - it's location doesn't match the output directory in your file watcher settings
I have designed a gulp task for linting of .ts files present in my project. When I run it, it shows correct output on the prompt, but I am not sure how to redirect that output to a file so it can be printed so that I can handover the complete file to developer to correct the code accordingly.
my task looks like :
gulp.task('lint', function() {
gulp.src("src/**/**/*.ts")
.pipe(tslint({
formatter: "codeFrame",
configuration: "./tslint.json"
}))
.pipe(tslint.report({
configuration: {},
rulesDirectory: null,
emitError: true,
reportLimit: 0,
summarizeFailureOutput: true
}))
.pipe(gulp.dest('./Dest/reports'))
});
Could someone please suggest how do I achieve this.
See redirect via tee for some good examples of redirecting the stdout to a file. It could be as simple as
gulp lint | tee logfile.txt
With that you'll get both the output in the terminal as per usual and a copy in a file, that will be created for you if necessary. You don't say what terminal you are using though. if that doesn't work perhaps:
gulp lint 1> logfile.txt
See bash redirecting if you are using bash shell. Or SO: bash redirecting with truncating.
The linked question also has info on stderr if you need that.
Also for a quick way to copy output to the clipboard in Powershell:
gulp lint | clip
gulp lint | scb (doesn't add an extra newline at the end)
See pbcopy same as clip for macOS.
In general, see pbcopy alternatives on Windows
I have a directory structure like below:
All ES6 files are in the js directory. Now I want after compiling those files to put all of them into a dist directory but I do not know how can I do that.
I've added a Babel watcher in PhpStorm that has this configuration :
program :
D:\wamp\www\vuejs\node_modules\.bin\babel.cmd
Arguments :
$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output path to refresh :
dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
What changes should I make in the watcher configuration?
It can look as follows:
Arguments : $FileName$ --out-dir $ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$ --source-maps --presets env
Output path to refresh : $ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$\$FileNameWithoutExtension$.js:$ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$\$FileNameWithoutExtension$.js.map
Working directory: $FileDir$
Note that Working directory: field is usually hidden, you need to expand Other Options: to see it
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