Grunt + Jekyll + LESS

As you may have noticed, the website looks different to how it was previously. I decided it was time for a refresh and I wanted to make the design a little more interesting. While Jekyll↗ & Github↗ pages use SASS↗ the Bootstrap theme I settled for uses LESS↗ . This meant that I needed to compile all of my CSS outside of Jekyll. Most of the articles I found say use either Gulp↗ or Grunt↗ , looking at the syntax of the two I preferred Grunt as it didn’t look like code. Installation was straight forward enough; Grunt + Jekyll + LESS 1/3 b n r p e m w i i n n s s t t a a l l l l - n g o d g e r u n t - c l i So now what? I needed something which would do the following … Compile the LESS files Combine all of the CSS files into one Minify the resulting CSS files Run Jekyll to build the files After a lot of trial and error I managed to get all of the above plus the ability to have the browser automatically refresh when I change a file, which was nice 😄 You can see what happens when I run grunt server or grunt css in the following asciicast↗ …. Grunt Example↗ My configuration currently looks like …. packages.json Grunt + Jekyll + LESS 2/3 { } “ “ “ “ “ “ “ “ “ “ “ “ “ “ “ } n v d a h l d g g g g g g g l a e e u o i e r r r r r r r o m r s t m c v u u u u u u u a e s c h e e D n n n n n n n d ” i r o p n e t t t t t t t - : o i r a s p ” - - - - - - g n p ” g e e : c c c c j c r “ ” t : e ” n o o o o e o u m : i ” : d “ n n n n k n n e o “ : e ~ t t t t y t t d “ n R “ n 0 r r r r l r - i 0 ” u “ ” c . i i i i l i t a . : s h , i 4 b b b b ” b a g 0 s t e . - - - - : - s l . “ t s 5 c c w l c k a 1 T M p ” ” o s a e “ o s s ” h c : : , n s t s * n ” s , e K / c m c s ” n : e e / { a i h ” , e s M n m t n ” : c “ ” e d e ” ” t * , d r d : : “ ” ” i i i : * : a c a “ “ ” k - * “ * , “ G g ” * ” * l ” , Gruntfile.js Grunt + Jekyll + LESS 3/3 m l } r g g g } o g p e d o c y o } f “ } } } c c s ‘ ] d } } c c s d } } j o s } d o d c } } } w o l } c f t } h f t o s } } } c s o p b } } } ) e r r r ; d r k s e p o u p , i _ , o s r _ , e , s s r e , e p r , i p e o , a p i , s i a , t i a p p , o e p o a , ; q u u u u u g s v t m i t l c n s c c s s s c s k t c s t s n t t v s l s m l s t a n r t r s u n n n l n : : e i p c i e s c : : s t m : : t y i : t i t f c i e : e k l e k i w n v i t e i t t t e t l o r o m s s a s : i : l o : o : i h o r s s : s s o n e e o : : r . . . . . g { o n e m i : / t { [ / n { ‘ l n ‘ n g : n e { : : : : n : c r n e r r r e i r p s s p z m : * ‘ : c ‘ : s . { s ‘ : s l { s t : s 8 ‘ ( e e e x n u m : s r a { a ’ c s c : ’ : . { : o [ [ [ [ : f : : 0 . ‘ g g g p i n e : e t i { s { s s { / ‘ a ‘ ‘ ‘ ‘ a { 0 / l i i i o t t n { s i n s / s { { _ _ { d _ l * j { l { { 0 _ o s s s r C . t t s o . / m / s c : c e . e s , s a t t t t o f : r : n c m a m i o s s h k e i d e e e s n i u : s a i a t n t s s t y , t - r r r f l { e t s i n i e f r / ’ m l e g T T T = i e , r 2 ” n . n ’ i u * , l l ’ r a a a g . u : . c . , g e ’ ’ ’ u s s s f ( r e c s m - , , ‘ , ] n k k k u { e , “ s s i d c , t ( ( ( n a _ s ’ n e ‘ o ‘ - ‘ ‘ ‘ c d l ’ , . v _ n _ t d c s t J e c . l c i a e s e i S s s y e a n s f s r o O s s m s t c k a ’ v n N / ’ l s : l s u , e ( ( m ’ / c u ’ l r g ‘ a * s d ) t [ ’ r p i ’ s e ( ’ ‘ , u a n ] ’ s g , l n c . , , / r e [ t k l * u [ s ‘ ) a e ‘ . n ‘ s c g s c h t l ’ o { e s s t ) e , n . ” s m ; s n j m l s ‘ e s i ’ ’ c c o n , , o t n : n ’ ’ c ‘ ‘ c , ) s _ c a , s l o t ‘ ’ a n : w ] y c c a o a s t u t s c t : ’ h s c , ’ / s ] * s ‘ ) . ’ c ; h , s t s m ‘ m l c i ’ s n , s : m c ‘ i s _ n s p : ’ o c ] s s ) t s ; s ’ / , * ’ ‘ ] j , e k y l l ’ ] ) ; The following posts helped me get to where I am at the moment; Jekyll & Grunt setup↗ Using Jekyll with Grunt.js (and much more)↗ grunt-contrib-watch with LiveReload not working↗ I plan on adding a few more options to optimise the images and also compile the Javascript into something a little more discrete, eventually you can read it here.