8

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

elemelas
  • 143
  • 1
  • 2
  • 9

3 Answers3

7

I use this stack:

Caveats

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"]);
};
Ilan Frumer
  • 32,059
  • 8
  • 70
  • 84
  • thanks for the answer. so what do you use instead of compass? can you still use scss syntax? – elemelas Jan 06 '14 at 22:58
  • As I mentioned above, grunt-sass uses libsass which do supports scss syntax. I use pure sass, You can always create your own common functions library. for more advanced things like image sprites I can still use compass outside of that stack but at the price of performance. – Ilan Frumer Jan 06 '14 at 23:17
  • Please be aware that if you want to use Compass with Grunt, there is a grunt-contrib-compass project to make it easy: https://github.com/gruntjs/grunt-contrib-compass – richardaday Mar 18 '14 at 17:37
  • Also, not sure why Ilan mentioned that Sass Indentation is not supported. I am certainly using it with Grunt, but that may be because I am using grunt-contrib-compass instead of grunt-contrib-sass – richardaday Mar 18 '14 at 17:39
  • Disregard my last comment. Just noticed that Ilan is talking about grunt-sass as opposed to grunt-contrib-sass (the difference being that grunt-sass is built using C, which makes this faster, but also only supports SCSS). To me, the simplicity of using compass is worth the extra second or two of wait time. Good to know that grunt-sass exists though incase I do ever need to speed things up. – richardaday Mar 18 '14 at 17:42
3

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.

bogdan.mustiata
  • 1,725
  • 17
  • 26
0

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

AntonB
  • 2,724
  • 1
  • 31
  • 39