Search code examples
javascriptcssjekyllminify

Issues minifying CSS/JS with jekyll-assets


I'm having issues getting my asset pipeline to cooperate with minifying the CSS and JS. The Jekyll sites that I'm working with use SCSS and CSS. I'm wondering what steps need to be done in order to properly implement jekyll-assets to minify the SCSS, CSS, and JS?

I've tried adding the following to my _config.yml file:

plugins: [bourbon, neat, jekyll-sitemap, jekyll-assets]
sass:
  style: compressed
assets:
  sources:
    - assets/css
    - assets/images
    - assets/js
  compress:
    css:  true
    js:   uglifier

My Gemfile looks like this:

gem 'jekyll', '3.5.0'
gem 'bourbon', '4.3.4'
gem 'neat', '1.8.0'
gem 'jekyll-sitemap'
gem 'sprockets', '3.7.2'
gem 'jekyll-assets'
gem 'uglifier'

In the html templates, I've used tags like {% css normalize %}, however I can't get anything to minify with the jekyll-assets plugin (only the built-in Jekyll sass compression works). I'm pretty new to Jekyll, and I've been sifting through the documentation (https://www.rubydoc.info/gems/jekyll-assets/) and can't seem to figure this out. Any insight would be appreciated, since I feel like I'm missing something obvious.


Solution

  • Make sure you are in "production" mode when doing jekyll build. A number of configurations in _config.yml for jekyll-assets change when you run build with/without JEKYLL_ENV=production set.

    By default, jekyll-asset compression is false.

    See configuration documentation of jekyll-assets here: https://github.com/envygeeks/jekyll-assets#configuration

    Setting a value makes it explicit, and shared across both production, and development.

    assets:
      source_maps: true # false on JEKYLL_ENV=production
      destination: "/assets"
      compression: false # true on JEKYLL_ENV=production
      ...
    

    Try running JEKYLL_ENV=production jekyll build