Advertisement
Tools & Tips

Guard is Your Best Friend

by

A common argument against using preprocessors, like Sass, is that they introduce too much complexity, and are difficult to get started with. Especially today, though, this couldn't be further from the truth. In this episode, I'll demonstrate my file monitoring tool of choice, Guard. I'll think you'll love it!


Screencast


Show Notes

  • Installed Gems:
    $ gem install guard
    $ gem install rb-fsevent
    $ gem install guard-sass
    $ gem install guard-coffeescript
    $ gem install guard-livereload
    $ gem install guard-concat
    $ gem install guard-uglify

    Alternatively, you can use multiple parameters when installing Gems: gem install guard guard-sass.

  • LiveReload Browser Extensions
Related Posts
  • Web Design
    eCommerce
    An Overview of My Shopify Workflow ToolsShopify thumb
    Following the publication of the recent Shopify Theme Series I have had a few people get in touch and ask me about some of the workflow tools I use when building themes. Let's look at just a few of them.Read More…
  • Code
    Web Development
    Testing Your Ruby Code With Guard, RSpec & PryRuby wideretina preview
    Learn the basics of test-driven development in Ruby along with many common web development tools such as Guard, RSpec, and Pry, among others. Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Code
    JavaScript & AJAX
    Managing Your Build Tasks With Gulp.jsGulpjs retina preview
    The benefits of task runners in software development is obvious. They help to automate common, often tedious tasks and let you squarely focus on more important things, like writing awesome code. Seriously though, the ability to automate tasks such as image compression, minification, unit testing and much more is a huge time saver.Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…
  • Web Design
    HTML/CSS
    Setting up Foundation With Sass and CompassFoundation sass retina
    Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Foundation has a few different versions, currently we've covered the most common HTML/CSS variants, but now let's talk about a version built on Sass.Read More…