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.
Related
I have a bunch of static files (basically favicons, apple-site-icons, etc) that I want to be at the root of _site when it's built. Currently they're just sitting at the root of my main code folder (along with _posts, _scss, _layouts, etc). It builds fine but it would be nice to move them into a subdirectory so the main directory isn't cluttered up (it's an OCD thing).
Is there any folder where I can put these items so they automatically copy to the root of _site when I build? I know I can write a script to do this and trigger it after the build, and there's probably an extension I could lean on, but I'm looking for a solution that just automatically moves them when I run jekyll build for simplicity.
NBD if I can't do it, just curious because I'm kind of a neat freak.
Thanks!
Jekyll allows you to do exactly that using permalinks.
Permalinks are the output path for your pages, posts, or collections. They allow you to structure the directories of your source code different from the directories in your output.
A simple example extracted from the official page is a case where you have /my-pages/about-me.html with the front matter as follows:
---
permalink: /about/
---
This way you specify the output url. In this example, you could access it in local with localhost:4000/about/
The source option. You can specify this in your _config.yml or as a command line option (https://jekyllrb.com/docs/configuration/options/). How you set this has slightly different requirements/implications.
First, move everything that belongs to the Jekyll site into a folder (e.g. "src").
Then set one of these up (assuming you have a Gemfile):
Command line option with root Gemfile:
Keep Gemfile in the root folder
Run bundle install
Run bundle exec jekyll serve --source src
Command line option with nested Gemfile:
Run BUNDLE_GEMFILE=src/Gemfile bundle install
Run BUNDLE_GEMFILE=src/Gemfile bundle exec jekyll serve --source src
Config file option:
Keep Gemfile and _config.yml in the root folder
Add source: src somewhere in your _config.yml
Run bundle install
Run bundle exec jekyll serve
Each solution here might work better with other external services building your site. There are likely other ways to set this up, but this should get you started.
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'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
Is it possible to use Susy with Jekyll? If so, how?
I tried adding 'susy' to my Gemfile and bundle install'ing, then adding susy to my gems array in config.yml:
// _config.yml
...
gems:
- 'jekyll-compass'
- 'susy'
and following the instructions in Jekyll's docs, placing #import 'susy' in my /css/style.scss file. However, I get an error:
File to import not found or unreadable: susy.
jekyll-compass lets you configure Compass. There's more info in its readme, but for susy I just needed to add a _data/compass.yml file, and add
require:
- susy
to it.
Also, jekyll-compass expects your main entry style.scss to be under _sass, not css (like Jekyll's out of the box sass support does). I'm sure this is configurable as well.
If you're willing to install susy with bower, you can just symlink the files under bower_components/susy/sass to the _sass directory (ln -s bower_components/susy/sass/* _sass. I have a fairly minimal working example on GitHub.
The CSS is generated properly and served here for now (though that link will hopefully rapidly become out of sync with the git commit referenced above).
I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.