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
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:
I currently have my directories setup such that my whole React project, including index.html, is inside my src/ directory. When I run npm run build, all of my .js/css files are put into my /dist folder. However, my index.html isn't being included. I installed html-loader and set it up in my webpack.config.js as such:
{
test: /\.html$/,
include: APP_DIR, //let APP_DIR = path.resolve(__dirname, 'src')//
loader: 'html-loader'
}
My understanding was that this would add my index.html file into my dist/ after running a build but it's not. I've looked at the html-webpack-plugin but what I gather from that is that it generates an index.html file for you but I don't need one generated for me. I just want to include the one I already created.
I later realized that the html-webpack-plugin allows for a template option which, in my case, would be my own src/index.html file. It just copies it over into the index.html it generates in my dist/ folder.
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
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
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.