Fastest way to compile SCSS (Compass) + refresh the browser?

Question

Just wondering what in your opinion is the fastest way to have your SCSS compiled and browser refreshed? I'm currently using LiveReload, but it seems to be a bit slow sometimes, it can take from 1-3sec. It doesn't seem much, but I feel like I'm losing my proper coding pace.

What do you guys use? would CodeKit be faster? Or maybe Sublime LiveReload plugin (not the actual app)? Or maybe I should give up Compass and use something else? Any suggestions would be appreciated.

PS. I'm on OS X

Answer 1

I use this stack:

• gruntjs
• grunt-sass (uses libsass via node-sass instead of ruby sass)
• grunt-watch-contrib

Caveats

• Sass indented syntax is not supported.
• Compass is not supported

But it is much faster x100xxx...!

Read more here:

http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

Example

To enable live reload on your page, add a script tag before your closing body tag:

<script src="//localhost:35729/livereload.js"></script>

That's an example of a Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    sass: {
      dist: {
        options: {
          outputStyle: "nested"
        },
        files: {
          "dist/css/app.css": "src/scss/app.scss"
        }
      }
    },
    watch: {
      options: {
        livereload: true
      },
      grunt: {
        files: ["Gruntfile.coffee"]
      },
      sass: {
        files: "src/scss/app.scss",
        tasks: ["sass"]
      }
    }
  });
  grunt.loadNpmTasks("grunt-sass");
  grunt.loadNpmTasks("grunt-contrib-watch");
  grunt.registerTask("build", ["sass"]);
  grunt.registerTask("default", ["build", "watch"]);
};

Answer 2

You could use fast-live-reload, to do exactly that, and you won't need all that configuration either. I assume something along these lines would do:

fast-live-reload -ep "compass watch" \ -s http://path-to-your-app/ \ dist/css/

That would run compass watch on startup, and kill it when you're done, and reload the page whenever the dist/css folder is changed.

This is a flow that works well also with other external watchers like typescript.

Disclaimer: I am the creator of fast-live-reload.

Answer 3

For new projects I recommend scaffolding with Yeoman, which will automatically create the files necessary to build for production, live-reload, auto-compile scss / less, and even optimize images -- all handled by Gulp (the best alternative to grunt and easier to use in my opinion).

https://github.com/yeoman/generator-gulp-webapp

If you aren't starting out a new project then follow these tutorials on modern front end workflows

http://latviancoder.com/story/our-frontend-workflow

http://viget.com/extend/gulp-browserify-starter-faq

Don't forget Javascript is great. It can be used to solve most of your problems by combining smaller tools which in conjunction can automate and improve your productivity by 10x. Especially if you are in the front end.

Here is a larger overview of Javascript Tools that can help improve your productivity:

https://dgosxlrnzhofi.cloudfront.net/custom_page_images/107/page_images/JavaScript-Tools-1200.jpg?1395348993