You should now be able to open a terminal window, navigate to the root directory of the Drupal site you want to use livereload on, and run the command guard. This will allow you to run guard from any directory on your filesystem, and watch all the subdirectories for changes to either. The easiest way to set up Guard correctly is to create a config file in your home directory called. That should be it, all dependencies should get resolved for you by the various tools. But, you may have to do things differently here possibly. Installing Ruby applications can turn into a bit of a nightmare when it comes to dependencies, but as I'm 95% a PHP developer I don't really have anything else using Ruby, and it just seemed to work in Ubuntu anyway. Guard is a ruby command line tool that will allow you to take action when a file changes on disk, and some clever people have written a livereload action for Guard: guard-livereload. If you have linux though, it's actually really simple too.
#Using guard livereload mac
There are lots of sites detailing how it works, and there's a great Mac program called: LiveReload that will get you up and running super quick, if you have a Mac. You don't have to make a change and then switch to your browser and manually reload the entire page, change 'notifications' are pushed to the browser where they will trigger that single changed file to be reloaded.
Basically it re-loads your CSS (and Javascript some of the time) automatically as you make changes. scss live-reloading, which will in time save you hours and hours of waiting for that pesky browser to reload.Livereload is one the coolest things to happen to frontend development in the last little while, and actually it can really speed up your work. Great job! Now your Rails app is set up with. Once your browser is connected, the console should print out: 07:01:45 - INFO - Browser connected.ĥ. (Quick note about the -P option when running Guard: Using the -P flag only runs the block in the Guard file by the name you pass in afterwards, in this case livereload, making it easy to avoid running rspec and any other time consuming tasks that can wait until later.) The terminal should print out the following notification: 06:57:53 - INFO - LiveReload is waiting for a browser to connect. Then run Guard -P livereload to start live reload. Run your Rails server (or restart if it’s already running). If you run into errors at this point, you can just add the example live reload block to your Guardfile. Set up the Guardfile configuration by running Guard init live reload. Add the Rack-livereload configuration to your app/config/development.rb do # Automatically inject JavaScript needed for LiveReload _after(ActionDispatch::Static, Rack::LiveReload) endģ. I included the required: false on all our Guard-related gems since I only need them on the command line and not in the Rails app itself.Ģ.
#Using guard livereload install
group :development do gem “guard”, “>= 2.2.2”, require: false gem “guard-livereload”, require: false gem “rack-livereload” gem “rb-fsevent”, require: false endĭon’t forget to run bundle install afterwards. You’ll also need rb-fsevent if you don’t already have it included in your Gemfile. Add Guard, Guard-livereload, and Rack-livereload to your development gem group of your Gemfile. Recently, Guard-livereload (which is linked to Rack-livereload) was released and now makes it possible to implement live reloading in any Rails app in a few quick steps:ġ. Pretty cool, right?Īs a Rails developer, you’re probably familiar with the Guard gem, which you can configure to run Rspec, Sidekiq, etc. The livereload.js script then swaps out the old stylesheet for the new and the rendered page reflects the new styles. Rails receives the request, recompiles the file and delivers it back to the browser.
Then the livereload.js script (which is injected in the tag of every page) makes an http request to Rails to get the new version of the stylesheet. It sends a message via a web socket to the browser saying the file has changed. Guard notices that the file has been changed and that it is a.
#Using guard livereload how to
Then, the thought of the agonizingly slow Rails asset pipeline quenched my enthusiasm.Īfter digging into it for a while, I discovered that there are a couple of gems which now make it possible to live reload styles in Rails in under a second! I’d like to share how to set up Sass style injection on a Rails project. I thought it would be nice to have live reloading styles in Rails, like Phoenix, React, Ember or many other new web frameworks. Last Thursday, I found myself twiddling my thumbs waiting for the browser to reload for the umpteenth time and render my tiny CSS tweaks. How to Set Up Sass Live Reloading in Rails Using Style Injection
0 kommentar(er)
