Minify CSS during build


#1

Hey! I’m looking for a recommendation on how to minify my CSS during the build process.


#2

are you using sass? In your config I think you can do:

sass:
  style: compressed

#3

@rdyar Unfortunately no. I’m using Tachyons. However I see they have an option to use Sass:


#4

If you’re not using Jekyll’s Sass pipeline you could use something like Gulp or Grunt to minify your CSS.


#5

Even if your theme doesn’t use Sass, you could just rename your .css file to .scss and add that compressed property that @mmistakes mentioned. You don’t have to actually use any Sass techniques in your CSS.

When your site builds, Jekyll will minify the CSS. It’s a great approach. In my opinion, Jekyll’s docs on Sass could be improved a bit, but the info is there. https://jekyllrb.com/docs/assets/.


#6

@tomjohnson1492 I didn’t know that! Thanks!


#7

I added this to my config file:

sass:
style: compressed

What should I have in my head.html? .css or .sass or .scss?
Should I rename my css folder to scss?

Right now my source has a css folder with main.css.

My head.html has:
<link rel="stylesheet" href="{{site.url}}/css/main.css">

I’m getting a 404 error in the browser:
http://localhost:4000/css/main.css Failed to load resource: the server responded with a status of 404 (Not Found)


#8

what did you end with in the site folder?

you would rename the main.css in the source to main.scss, when jekyll builds it will rename that to main.css, so it should just work with renaming that one file.

Also, watch your formating in the config file, what you have above needs the second line indented (style: compressed is a subset of sass:)

I haven’t done what you are doing, I have a _sass folder with partials that get imported into the main.scss file, but it seems like it should work.

Knowing what is in the site folder will help figure it out.


#9

@rdyar Thanks! I was ending up with a .scss file in _site. I figured out the problem. I was missing two lines of triple dashes in my css file which is discussed here: https://jekyllrb.com/docs/assets/


#10

Might also be of help if your using sass watch… just add --style compressed. no need to add anything to config.yml.

eg: sass --watch _sass/app.sass:css/style.css --style compressed


#11

What is sass --watch? All I have in config.yml is:

sass:
    style: compressed

Can you explain a bit more?


#12

sass --watch is a command line instruction.

as you would do Jekyll serve --watch in your terminal window you can also use the sass commands.

If you haven’t started using Sass yet then you might find it very handy. I’m very new to all this after being stuck in the Drupal / cms vein for a few years but started with Jekyll just a few weeks ago and discovered Sass about a fortnight ago.

Its fairly simple to get to grips with if you know a little bit about css as basically it’s a quicker way to work with css files - you are essentially still writing css but without all the extra punctuation marks and curly braces etc. Or technically its a pre-processor that compiles all your css for you.

Also you can use includes so you don’t have one big massive file of css to trawl through.

if you wish - have a quick peek at my Git and you can see the structure of the Sass folder pulling in the relevant files which then write everything to the css folder as one big stylesheet.

my practice Githttps://github.com/chipsandcurrysauce/fresh-start)

There are of course many tutorials about it on youtube etc or, as it is going off topic of your initial question here, I guess you can always start a new thread if you have any questions.

Jump into Sass and play with it! heh :smiley:


#13

Jekyll supports pre-processing Sass natively, so there is no need to run the Sass gem via the CLI using sass --watch.

Simply running jekyll build or serve will process your Sass provided you have things configured to Jekyll’s liking.