grunt-watch

Теперь, когда мы настроили Grunt вместе с Sass, при запуске grunt в командной строке произойдёт обработка наших изменений. В быстрой разработке возврат к командной строке, набор grunt и обновление браузера уже устарело.

К счастью, у нас есть варианты. grunt-contrib-watch это пакет npm, который будет следить за нашими Sass-файлами и когда к одному из них притронутся, запустятся задачи Grunt для его обработки. Установите:

npm install --save-dev grunt-contrib-watch

В качестве дополнительного бонуса мы можем не только запускать наблюдателя, который будет обрабатывать наш Sass, но мы также можем отслеживать файлы .jade на изменения.

В Gruntfile.js мы должны добавить некоторые задачи Grunt:

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      dist: {
        files: {
          'public/stylesheets/style.css': 'sass/style.scss'
        }
      }
    },
    watch: {
      source: {
        files: ['sass/**/*.scss', 'views/**/*.jade'],
        tasks: ['sass'],
        options: {
          livereload: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-sass');
  grunt.registerTask('default', ['sass']);

};

И это всё что нам нужно. Grunt установлен, у нас есть работающий Gruntfile.js и мы можем также начать писать некоторый Sass.

Добавление Livereload в layout.jade

Чтобы получить живую перезагрузку в проекте, мы должны добавить ссылку на несуществующий JavaScript-файл в layout.jade в последнюю очередь в теге <body>.

script(src='http://localhost:35729/livereload.js')

В новом проекте Express это будет выглядеть так:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
    
    script(src='http://localhost:35729/livereload.js')

После этого добавления возвращаемся в браузер и обновляем страницу, а затем вносим любые изменения в Sass или Jade, которые должны запустить Livereload.

Автор и редакторы

Автор: Дейл Санде
Последнее изменение: 19.10.2015
Редакторы: Клим Щербаков