Browser Live Reload

Browser reloads the webpage on filechange

These Notes helps me to quick create an livereload solution while writing documentations in asciidoc on Windows (10). I had troubles with the Version of Ruby, artifacts from previous Ruby installations, Cygwin and Cygwin’s Ruby Version in combination with getting the file change events, and some more… .

I ended with an working solution which runs from Powershell, with Ruby Version 2.3 (Windows, not Cygwin’s), uses Asciidoc/Asciidcotor from Ruby via gem install asciidoctor. Ruby Version 2.4 (Windows, not Cygwin’s) was not working for me at the time of writing this blog entry.

Version Informations

Log:

1
2
3
4
5
6
7
8
9
10
11
H:\Documents\WindowsPowerShell> ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]
H:\Documents\WindowsPowerShell> gem -v
2.5.2
H:\Documents\WindowsPowerShell> gcm asciidoctor
CommandType Name Version Source
----------- ---- ------- ------
Application asciidoctor.bat 0.0.0.0 C:\Ruby23-x64\bin\asciidoctor.bat

File: %HOME%\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1

1
2
3
4
5
6
7
8
9
10
...
# Ruby
#$env:RUBY_HOME="C:\Ruby22-x64"
#$env:RUBY_HOME="C:\Ruby24-x64"
$env:RUBY_HOME="C:\Ruby23-x64"
Add-Path -Directory "$env:RUBY_HOME\bin"
...

Add-Path is a powershell-command in my powershell-profile, you can find it here (Add-Path).

Install

1
gem install guard guard-livereload asciidoctor asciidoctor-diagram coderay

Windows Ruby-Gems werden nach C:\Ruby23-x64\lib\ruby\ installiert!

Usage of Live Reload with an project

  • Create the file Guardfile in your project or elsewhere.
  • Open PowerShell Terminal and change into the directory where you created Guardfile.
  • Run guard start from PowerShell.
  • Serve the Directory with the HTML Output from asciidoctor via any WebServer (npm install http-server && http-server.cmd -p 6080)
  • Open Browser, Navigate to 127.0.0.1:6080.
  • Modify Files on which Guard is listing for File-Changes (Modify Events)… .

File:Guardfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
require 'asciidoctor'
require 'asciidoctor-diagram'
#guard 'livereload', notify: true, host: '127.0.0.1', port: '35729', apply_css_live: true, override_url: true, grace_period: 0.5 do
guard 'livereload' do
watch(%r{^.+\.(css|js|html)$})
end
guard 'shell' do
watch(/^*\.adoc$/) {|m|
# Asciidoctor.convert_file m[0]
Asciidoctor.render_file("Mitschrift.adoc", :in_place => true, :safe => 'unsafe')
}
end

Log:

1
2
3
4
5
6
7
8
9
10
PS P:\Java EE> guard start
Please add the following to your Gemfile to avoid polling for changes:
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
WARN: Unresolved specs during Gem::Specification.reset:
ffi (>= 0.5.0)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
21:51:48 - INFO - LiveReload is waiting for a browser to connect.
[1] guard(main)> Guard is now watching at 'P:/Java EE'
[1] guard(main)> 21:54:54 - INFO - Browser connected.E'

0%