Теперь, когда мы настроили 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.