CODEWITHSUNDEEP
sasssublimetext3compass-sasslivereloadcodekit
elemelas
elemelas

Reputation: 143

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

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

Upvotes: 8

Views: 12110

Answers (3)

bogdan.mustiata
bogdan.mustiata

Reputation: 1845

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.

Upvotes: 3

AntonB
AntonB

Reputation: 2853

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

Upvotes: 0

Ilan Frumer
Ilan Frumer

Reputation: 32357

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"]);
};

Upvotes: 7

Related Questions