Simple bundle to mock up web frontends with HAML/Coffee/Sass/Less.
Autocompiles your files on every save and refreshes browser without ⌘+R
or F5
Environment: You must have installed ruby
with bundler
gem in your environment to use guarded_preprocessors.
git clone git://github.com/kugaevsky/guarded_preprocessors.git
– сlone (or download) repository to your machinecd guarded_preprocessors
change your working directory.- Uncomment notification gems that you really need in
Gemfile
. - Uncomment notification instructions in
Guardfile
. - Run
bundle install
to install all dependencies. - Run
guard
command to watch files you modify.
Just run guard
command in your working directory and edit files in your source
directory.
All of them will be automagically compile in html
directory of your project.
source/
- directory for source files written in HAML/Coffee/Sass/Lesshtml/
- directory for compiled files in HTML/Javascript/CSS
Anyway, your can edit relative paths for each preprocessor in your Guardfile
. Syntax is really very simple.
Just redefine paths hash.
PATHS = { :in => 'source', :out => 'html' }
Right out the box you can use configured preprocessors
- HAML – for HTML preprocessing
- Coffescript – for Javascript preprocessing
- Sass, Scss or LESS – for CSS preprocessing
Your can configure system notifications for guarded files compilation. Follow instructions in Gemfile
. Just uncomment gem lines for your OS. And install notification software if needed.
- MacOS users: Growl notifications – GrowlNotify
- Linix users: Libnotify notifications – install
libnotify-bin
package with your favorite package manager. - Windows users: Notifu notifications – Notifu
LiveReload can autorefresh page in your browser on every file modification. To use this incredible feature just
- Install extension for your browser (Safari, Chrome, Firefox supported) from livereload extension page.
- Open your page in browser and turn on
LiveReload
by clicking on extension icon. - NB Chrome users: if you work without any web-server (opened file URL looks something like
file:///my-perfect-page.html
), you have to grant permissions for extensions to work with local files in Chrome. Go to extension management pagechrome://chrome/extensions/
and checkAllow access to file URLs
option below LiveReload extension.
That's all. Just save your file and it will be compiled and rendered in your browser in a moment.
TIP
If you want more information about livereload connection to your browser add ?LR-verbose
to your file URL.
To all guys that make frontend development faster and cleaner