17

I have a simple test jekyll app like so:

index.html is:

<script type="text/javascript" src="/assets/myfile.js"><script>
<p>hi</p>

and the myfile.js files is as follows:

var  x  = "this is a string";
alert(x +  "hi");

I just want to add a plugin so that it can minify the js file before it is written to the _site/assets/myfile.js file

How can i achienve that?

umar
  • 4,139
  • 8
  • 31
  • 47

6 Answers6

15

Here's a summary of what I've found while solving this in 2014:

Started with

  1. https://github.com/donaldducky/jekyll-cssminify

    Development was going well until it was beat by this project:

  2. http://www.matthodan.com/2012/11/22/jekyll-asset-pipeline.html

    ...which so far has been my favorite to implement, except it doesn't work now and it looks like development has been halted, so I was forced to turn to

  3. https://github.com/envygeeks/jekyll-assets

    ...which again, beats #2 but is just a touch trickier to use. Anyway, that's the only one that works, so that's what I'm using now.

iBug
  • 30,581
  • 7
  • 64
  • 105
Ben
  • 47,286
  • 44
  • 159
  • 208
  • Another +1 for jekyll-assets – Jason Axelson Oct 26 '14 at 01:52
  • 2
    Stupid question: how to use jekyll-assets to compress JS? I'm new to Jekyll and its docs sucks. – Anh Tran Oct 24 '17 at 04:43
  • Hi @rilwis, no worries. Been a while since I worked on this but it looks like right on the `readme` for Jekyll Assets there's a JS configuration object with a compression flag: https://github.com/jekyll/jekyll-assets#configuration – Ben Oct 24 '17 at 14:24
5

There are plugins for HTML and CSS minification with Jekyll, but a search doesn't turn up anything obvious for JS.

However, the source for CSS one above is less than 100 lines and actually uses Juicer to do the minification, which can also do JS, so that plugin could easily be used as a template to implement your own JS minifier (it looks like even just s/css/js/g would be close to working).

huon
  • 74,878
  • 14
  • 199
  • 204
4

I recommend the Jekyll Asset Pipeline gem for this. It supports any language (e.g. Scss, Less, CoffeeScript, Erb, etc.) and has a bunch of features (e.g. asset tagging, compression, gzipping, etc.) that set it apart. It also seems to be the fastest growing Jekyll-related gem these days, which I take to mean that it is gaining traction in the community.

Matt Hodan
  • 240
  • 2
  • 7
  • I was enjoying using this but it looks like development has halted? Using https://github.com/ixti/jekyll-assets for now. – Ben Feb 25 '14 at 22:07
2

For JS and CSS you can use the Jekyll Asset Bundler It uses the yui-compressor or closure-compiler gems.

crisscross
  • 1,425
  • 1
  • 15
  • 26
0

For images, I made a drop-in plugin that runs the images through image_optim:

https://gist.github.com/sffc/a828267913591159ab1cc3e1bfde20d7

sffc
  • 5,235
  • 2
  • 39
  • 61
0

This one seems fairly updated as compared to other plugins and minifies HTML/XML/CSS/JS Minifier utilising yui-compressor, and htmlcompressor
https://github.com/digitalsparky/jekyll-minifier

GorvGoyl
  • 27,835
  • 20
  • 141
  • 143