Самый быстрый способ скомпилировать SCSS (Compass) + обновить браузер?

Я использую этот стек:

• gruntjs
• grunt-sass (использует libsass через node-sass вместо ruby ​​sass)
• grunt-watch-contrib

Предостережения

• синтаксис Sass с отступом не поддерживается.
• Компас не поддерживается.

Но это намного быстрее x100xxx...!

Подробнее здесь:

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

Пример

Чтобы активировать перезагрузку на странице, добавьте тег script перед закрывающим тегом body:

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

Это пример 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"]);
};

Вы можете использовать fast-live-reload, чтобы сделать именно это, и вы выиграли тоже не нужна вся эта конфигурация. Я предполагаю, что что-то в этом роде будет делать:

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

Это будет запускать compass watch при запуске и убивать его, когда вы закончите, и перезагружать страницу всякий раз, когда изменяется папка dist/css.

Это поток, который хорошо работает и с другими внешними наблюдателями, такими как машинописный текст.

Отказ от ответственности: я являюсь создателем fast-live-reload.

Для новых проектов я рекомендую скаффолдинг с помощью Yeoman, который автоматически создаст файлы, необходимые для сборки для производства, живой перезагрузки, автоматической компиляции scss/less и даже оптимизировать изображения — все это обрабатывается Gulp (на мой взгляд, это лучшая альтернатива grunt и более простая в использовании).