I tried Cactus and Codekit, and I know Adobe Edge Inspect does a similar function, but I would love to hear from you to know if there are better options out there. Thank you!
Open Terminal, cd into your website directory, paste this:
python -m SimpleHTTPServerand press enter.
Go to your browser and open up http://localhost:8000
If you go to airport and lookup your ip address then you can even open this website on other devices on your network. Just go to http://yourIPAddress:8000
brackets.io has a live file preview in the browser that updates as you edit / save local files.
I’ve been using Grunt + LiveReload (really grunt-contrib-connect + grunt-contrib-watch) for several months now and it just works for me. I generalized this workflow and made a GitHub static site generator out of it. Though someone recommended BrowserSync to me, which seems like a beefier version of LiveReload.
Grunt and LiveReload (the chrome plugin, not the app) are my new setup of choice.
A lot of people mention Hammer, Anvil, and Codekit, and I use all of them regularly, but I'm moving away from desktop apps, and toward a more modular setup of small, open-source components. If you're a lone wolf, they're fine, but working on a team, and being responsible for the front end means I need other people tone able to reliably work with my code.
It might mean that I need to write up a lot more documentation, but it's not always possible to tell someone (team member or contractor) to install $50 worth of apps to make a CSS modification.
I've been using http://mixture.io recently and have enjoyed it pretty thoroughly.
Mixture is an awesome tool, and I love the way it handles live preview on multiple devices simultaneously. On the other hand it's so much more than a live-preview tool.
Really like it too, all is "built in" you simply have to launch it on your project and it comes with the remote debug tool. If I remember right Prepross does this as well.
I also like harp, and their hosted service harp.io. It handles automatic compiling of assets and automatic local hosting of multiple projects with free software. Their hosted service then gives you a one-button interface to publish the site so it's accessible on the internet.
Harp doesn't handle live-refreshing, so I still use LiveReload on my harp project folder (with asset compilation turned off), but it's super convenient to be able to go from working locally to publishing for a client to see so easily.
Without harp, I usually use Anvil for serving projects.
Do you have a problem with Anvil eating up cpu?
If anything, it's Hammer's Reload that's eating up CPU.
No, but maybe update Pow ?
I also found CodeKit the most valuable tool for my purposes.
I use Gulp now, before it I used Prepros.
Kill me but I use Codekit + Meta Refresh-nocache :D
Shameless plug: this is Cactus bread and butter. It works without having to do anything special and on multiple devices at the same time.
We just did a little blog post on it: http://cactusformac.com/blog/posts/meet-auto-refresh.html
Vagrant added a new feature in version 1.5 called Vagrant Share that makes your local dev server publicly available. Obviously you have to be running Vagrant to use this one.
I also just came across a service called ngrok that basically does the same thing as Vagrant Share, but looks like it works with any local server/port.
I'm biased, but Brackets. Especially with the Everyscrub plugin, It lets you drag over any value and see it update live on screen. Look for it in the extensions menu.
I have a question, I use Live-reload and Grunt for this purpose and for most part it works well. I just have trouble in making this work smoothly since Sass compilation takes close to 6 seconds so although the CSS live-reload does happen, I have to wait close to 6 seconds before I see it happening.
I am kinda stuck in this limbo where I don't see my current set of tools/workflow solving this problem.
I tried using lib-sass over ruby-sass but @extends do not work currently so lib-sass is not an option for me at the moment.
I use gulp+browser-sync.
I love Edge Inspect, if only because it's easy and the idiosyncrasies of the different devices are hard to nail without viewing them live on the device itself.
Also, I guess you could use XCode's device simulator for iOS devices, and I think Android has something similar with their dev stuff.
As a designer learnig to code and already working with code for prototyping I have to say that codekit is the best thing I've tried so far. I also played around with cactus, adobe edge and mixture. I think they are all pretty well made apps, but the new codekit seems to be a winner for me. It's great for live-previewing your designs on all your screens with live reload and all, and it handles stylus, sass and anything else you throw in it. Also being able to directly install components also makes it more approachable and fun to just try things.
Although I love everything about mixture, for me the only hurdle was that I had to work with their liquid templates to make use of the full potential of their product.
(I mean in several devices (iPhone, iPad), not just the computer)
yup the live preview in Codekit2 works with those devices! :D