I am tired to convert Scss modules to CSS one by one manually. I just want to convert my individual Scss file from many modules. I am using compass watch on command line based compiling CSS through ruby on rails service for compass.
Here you can see how I am managing Scss to CSS conversion through ror cli.
You can create a scss or sass file where you will import all partials.
Example: create a sass file inside your sass directory and name it as you want, maybe app.sass.
Inside app.sass, import all you partials like so: #import 'partials/button-actions'
Create config.rb in the directory where you starting watcher. I prefer to use the project root directory.
Inside config.rb insert:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
# Change paths to yours. css_dir is css output directory, sass_dir is your sass file directory
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "i"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
And start watcher. You will get an app.css file which contains all the code from the imported files as the result. Import it into your HTML.
Related
I'm trying exclude paths in Pug, that should not be among compiled files in dist folder, but nothig help!.
I renamed dir parts to _parts, parts/footer.pug to _parts/_footer.pug, but I still see compiled files in dist/_parts/ dir.
So, how can exclude some paths in Pug. (I use pug-cli as compiler)?
Yes it's possible with bash
And if you're on Windows, you can use git bash
You just need to prefix the ignored file with "_"
So, suppose your project directory looks like this:-
my-project/
index.html
pugjs
_head.pug
index.pug
you can do:-
pug -w "$(ls ./pugjs/!(_*))" -o ./
Now what does this line do?
basically, the "$(ls ./pugjs/!(*))" lists all files that don't have the prefix ""
they get passed as files paths argument to pug
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 want to use html-minifier to minify my html files.
I have install it by npm install -g html-minifier
However, sudo html-minifier rb.html --removeComments did NOT remove the comments in rb.html.
Does anyone know how to use it?
Additionally, I just want to minify the size of the html files by keeping exactly the same layout, what are conventional parameters that we put to html-minifier?
You can target all html files in a specified directory with the following command:
html-minifier --input-dir dist --output-dir dist
With this example script I am compressing all html files in dist and outputting them to the same directory — essentially replacing the uncompressed html files with the compressed ones.
The command above actually doesn't do anything to the files because no options were defined. Some useful options are:
--collapse-whitespace: Collapse whitespace that contributes to text nodes in a document tree.
--remove-comments: Remove HTML comments
--minify-css: Minifies embedded and inline CSS (<style></style> and style="")
--minify-js: Minifies embedded and inline JS (<script></script> and e.g onload="")
Here's a command that you may end up with:
html-minifier --input-dir dist --output-dir dist --remove-comments --collapse-whitespace --minify-js --minify-css
To see the complete list of available options, run html-minifier -h.
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 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.