#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to switch applications and manually refresh, which is awkward and prone to breaking concentration.

Even better, LiveReload can trigger all the preprocessing to happen first. So if you like to work in SASS, Compass, LESS, Jade, CoffeeScript, Eco, HAML, Slim, or Stylus (or would like to try out working with these languages) LiveReload makes it easy. Essentially, just start making files with the appropriate file extention and LiveReload will compile them down to their native language every time the file is saved.

Comments

  1. User Avatar
    Alfred
    Permalink to comment#

    Do anyone know if there is a similar program for windows?

    • User Avatar
      zsitro
      Permalink to comment#

      same question here :)

    • User Avatar
      Fredrik
      Permalink to comment#

      While the Windows version of LiveReload is under development you could try XRefresh

      Side note: Ah, the things you find with Spotlight.

  2. User Avatar
    Sergei
    Permalink to comment#

    hey Chris, umm, isn’t “developement” spelt “development”?

  3. User Avatar
    Jack
    Permalink to comment#

    Will LIVERELOAD work on WordPress files that aren’t local (i.e. server)?

  4. User Avatar
    Henry
    Permalink to comment#

    I’m your fan man!!! Thank you soo much!
    Finally i can work with slim in static pages!

  5. User Avatar
    Michael Roher
    Permalink to comment#

    Didn’t work for me..

    • User Avatar
      Michael Roher
      Permalink to comment#

      UPDATE: Working. Had to refresh browser and LiveReload app.

  6. User Avatar
    Henry Oliver
    Permalink to comment#

    Hi, i work with STHML files, that the way i use includes. So the LiveReload don’t watch these files.
    Its any configuration that can i do to solve this problem?
    Work fine in my css files, when i saved the page automatically shows the changes, but when i saved my SHTML file nothing happen.

    Thank you;

    • User Avatar
      Henry Oliver
      Permalink to comment#

      Hey, sure! When you click the monitoring Options button, you’ll be able to enter additional extensions to monitor.

      Now its works!! :)

  7. User Avatar
    Matt Banks
    Permalink to comment#

    Great tips here! Would love to see a screencast on using SASS/LESS with WordPress or another CMS (eg should you compile locally and upload the CSS file, or have Ruby watch the theme directory and compile when changes or uploaded, etc).

    • User Avatar
      Evandro Pastor
      Permalink to comment#

      I Agree with Matt. It will be nice to see such screencast. :D

  8. User Avatar
    supprof
    Permalink to comment#

    ! thank you criss
    how about using custom posts and taxonomy and hooks in wordpress
    thank you

  9. User Avatar
    arnold
    Permalink to comment#

    I dont know but you still got audience who uses Windows ??

  10. User Avatar
    adam
    Permalink to comment#

    awesome! I’m going to be using this for sure!
    I need to learn more about LESS and JADE…
    Chris, please do some videos on these :)

  11. User Avatar
    CJ
    Permalink to comment#

    Can you use LiveReload to work locally with WordPress files thru MAMP?

  12. User Avatar
    Aaron Stone
    Permalink to comment#

    The #BADA55 was a funny touch…

    Funny elements in videos make them more enjoyable and sassy…

  13. User Avatar
    Jack
    Permalink to comment#

    Can you use LIVE Reload if your wordpress theme is not running locally but on a server like Media Temple?

  14. User Avatar
    Ando
    Permalink to comment#

    Linux versions would also be greatly appreciated by some people. :)

    • User Avatar
      Jan-Marten de Boer
      Permalink to comment#

      It’s not too difficult to write our own daemon for that

  15. User Avatar
    Sam
    Permalink to comment#

    You really made my day :)

  16. User Avatar
    Andrew

    Does LiveReload 2.3.5 still automatically place the icon in the menu bar?

    When I open the app, nothing appears there, so really not sure how to get it to watch folders (this video 1:47s)

    Any thoughts, is it just me :)?

  17. User Avatar
    Jon
    Permalink to comment#

    Live Reload is also available for Windows as a Sublime Text plugin: Live Reload for Sublime Text

  18. User Avatar
    Mangat
    Permalink to comment#

    Hello every body,
    I am a new guy to the css-tricks and also for web designing.
    I want to use the dreamweaver
    i need
    tongal menu bar in html and css
    place send me filles

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag