Menu icon Foundation
How do I use libsass to compile Sass and live reload

Hi guys!

I have created my Foundation 5 project in the command line using 'foundation new MY_PROJECT --libsass', and would now love to know how to use libsass's library to make Grunt compile my Sass and live-reload it in the browser!

I used this tutorial to implement it in foundation 4 - http://moduscreate.com/get-up-and-running-with-grunt-js/ - but due to Foundation 5's new file structure I am a little stumped!

Any help would be greatly appreciated!

libsassSasscompilelive reload

Hi guys!

I have created my Foundation 5 project in the command line using 'foundation new MY_PROJECT --libsass', and would now love to know how to use libsass's library to make Grunt compile my Sass and live-reload it in the browser!

I used this tutorial to implement it in foundation 4 - http://moduscreate.com/get-up-and-running-with-grunt-js/ - but due to Foundation 5's new file structure I am a little stumped!

Any help would be greatly appreciated!

Julian Ćwirko over 5 years ago

Hi, if you know Yeoman ( http://yeoman.io/ ) you can use my generator: https://npmjs.org/package/generator-zf5
(livereload soon..)

..or you can rewrite your Gruntfile.js .. look at my Gruntfile.js : https://github.com/juliancwirko/generator-zf5/blob/master/app/templates/Gruntfile.js

Thomas Hoadley over 5 years ago

Awesome thanks dude! I used your yeoman generator :)

Do you have a twitter or anyway for me to stay updated on the live reload implementation? :)

Julian Ćwirko over 5 years ago

i'm glad you like it, it is simple but in my daily work very helpful :)

you can always check for updates by command: [sudo] npm update -g generator-zf5
and here is my twitter: @JulianCwirko

Vincent Mac over 5 years ago

I also have a generator, https://npmjs.org/package/generator-browserify, that will do all this for you. This has livereload enabled. You can choose between compiling your sass with libsass or compass.

Stefan Staudenmeyer over 5 years ago

TL;DR ?

Throw away the gem, create a gruntfile and open a socket.
This might help:
https://github.com/docpad/docpad-plugin-livereload

Clement over 5 years ago

Vincent and Julian, what are the main differences between your two generators?

Julian Ćwirko over 5 years ago

@Clement
Vincent has much bigger generator, with Bootstrap or Foundation to choose. With Jade templates, libsass or compass version.. my generator is very simple, but usefull, I think. (only for Foundation 5 with libsass)

Clement over 5 years ago

Cheers Julian. Your generator sounds more appropriate in my case but I had trouble installing it (and Vincent's too) as I believe my workplace blocks git:// and I think the generator uses git rather than https for cloning a repo or two. If this is indeed the case, any chance for a tweak to the generator? And can you confirm that this generator should work fine in a Ruby on Rails app?

Julian Ćwirko over 5 years ago

This is standard Yeoman generator so check: https://github.com/yeoman/yeoman/wiki/Getting-Started

"make sure you have installed Node.js, Git"

Patrick Whitty-Clarke over 5 years ago

Hi Julian,

Thanks a lot for your generator, it rules! I'd like to write an English tutorial on it soon as its quite daunting to get started but once you are there it's amazing.

Cheers,

Patrick

Christian Matthias over 5 years ago

I went with julian because it has font-awesome and I love font-awesome for so many different things.

  1. Do I install his generator in the root of my plugin along with all of the other stuff. I have shit everywhere I don't even know what is going on anymore.

  2. I still don't get how I "update" something and it changes and then I "reload" it and see.

I am using Git-Bash ok but just not understanding at all what the hell is going on. I go foundation to install a project... the site works on my local... beyond that I am lost.

Christian Matthias over 5 years ago

P.S. Can I erase everything and start over... meaning can I just delete the file folders that were created?

Christian Matthias over 5 years ago

any help with this today?

Klevis Miho over 4 years ago

How can we use Livereload without using the Yeoman generator from Julian Ćwirko, so only using Foundation with libsass install?

Julian Ćwirko over 4 years ago

Hi Klevis, you can edit your Gruntfile.js in your standard scaffold.
You can refer to yeoman generator Gruntfile.js here: https://github.com/juliancwirko/generator-zf5/blob/master/app/templates/Gruntfile.js (see 'watch' task)

Also remember to add task: grunt-contrib-watch in package.json ;
ref: https://github.com/juliancwirko/generator-zf5/blob/master/app/templates/package.json

You can read about grunt watch task config here: https://github.com/gruntjs/grunt-contrib-watch

Jacob Moen over 4 years ago

Without using any generators, you can read this tutorial:
http://creativitykills.co/getting-started-zurb-foundation-and-grunt-js/

And here's the instructions for getting liveReload working:
https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#live-reloading