The filesystem where your Sass source files are located.Live reloading is accomplished by serveral different pieces working closely together: Why do we need both guard-livereload and rack-livereload? How Guard and livereload work together Now that you have livereload working in your Rails app, you may be wondering what is going on behind the scenes. The livereload connection between your browser and guard-livereload will be established, and you’ll see this message from Guard on the command line: 14:36:50 - INFO - Browser connected.Ĭongratulations! Now you can edit CSS and Sass in your asset pipeline and your changes will be automatically compiled and refreshed in the browser as soon as you hit “Save”. You should see Guard start up and the livereload monitor should begin listening for connections: 14:36:48 - INFO - LiveReload is waiting for a browser to connect. rspec), using -P livereload ensures that only livereload will be executed, making things much faster. If you have a large Guardfile with other time-consuming plugins (e.g. The -P option is a recent addition to Guard that allows you to specify which Guard plugin to execute. stop and start Pow or rails server) and then run the following command to start Guard’s livereload monitor: guard -P livereload If necessary, modify the contents of the :livereload block in the Guardfile to match this example: guard :livereload do This will create or append to the Guardfile in your project. # Automatically inject JavaScript needed for LiveReloadĬ_after(ActionDispatch::Static, Rack::LiveReload)įinally, set up the necessary guard-livereload configuration by running guard init livereload. Add this config to config/environments/development.rb: do Next, enable rack-livereload by adding it to your development middleware stack. This is because they are only needed when running guard on the command line they aren’t used by the Rails app itself. Note that all guard-related gems are marked :require => false. Gem "guard-livereload", :require => false Since I’m on a Mac, my Gemfile also includes rb-fsevent for best Guard performance. Then, add the guard, guard-livereload, and rack-livereload gems to the :development section of your Gemfile. scss extension, like this: app/assets/stylesheets/_variables.scss Partials should use a leading underscore and the. using the asset pipeline) and are named with the. Basic Rails livereload setupįirst, make sure your standalone stylesheets are in app/assets/stylesheets (i.e. How do we get the benefits of style injection within an existing Rails project?Īnswer: guard-livereload (if correctly configured). Style injection is not entirely new, but it is becoming easier now that user-friendly tools like CodeKit and LiveReload are gaining in popularity. As Chris Coyier explains in his Style Injection is for Winners post on CSS Tricks:īy “style injection”, I mean being able to see styling changes immediately after authoring them without having to manually refresh your browser window… it’s so awesome that if it’s not a part of your workflow you should consider updating yours to include it. Be conscious of your statements and use them sparinglyīefore going any further, let’s review what I mean by style injection.Embrace the Sprockets //= require directive (yes, even in SCSS).Make sure your Guardfile enables style injection by using the right regular expressions.Use guard-livereload with rack-livereload to automatically push new styles to the browser.It’s true, unfortunately: out of the box and in development mode, Rails is way too slow for editing and previewing Sass. Until recently this was my experience working with Sass in Rails: edit SCSS file save switch to browser and hit refresh wait for Rails to route, query the database, and render my ERB now wait for what seems like 5 seconds for the asset pipeline to recompile everything yawn oops that’s not the style I expected back to editing SCSS repeat. “But isn’t the asset pipeline too slow?”Ī fast workflow like this might seem impossible in a typical Rails project. The browsers don’t even reload the page the new styles simply pop in. As soon as you hit “save” in your editor, your SCSS changes are compiled, and pushed out to all these browsers. You have your app open in a few web browsers for testing: Chrome on the main display, IE9 VM on the second monitor, and your iPhone and iPad on the desk. Imagine you are editing an SCSS file in your Rails application.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |