LiveReload на Node.js

Что это такое?

LiveReload — это утилита, которая позволяет автоматически перезагружать страницу в браузере при изменение её кода и ресурсов(html, css, js, images, etc) на сервере. Кроме того LiveReload позволяет применять изменения в CSS и JavaScript без перезагрузки страницы.

Зачем это нужно?

Для удобства разработки клиентской части приложения и не более. Как написано на официальной странице утилиты:

The Web Developer Wonderland (a happy land where browsers don’t need a Refresh button)

Как это работает?

Принцип очень прост, утилита состоит из сервера и клиента:

1. Cервер: WebSocket который мониторит изменения в заданных файлах и если такие изменения обнаружены — уведомляет клиента
2. Клиент, есть несколько вариантов:
   
   • Дополнение для браузера которое обновляет страницу.
   • JavaScript сниппет, который слушает WebSocket сервер и при необходимости обновляет страницу. Его необходимо вставить в свои HTML файлы.

Node.js, huh?

Если Вы уже используете Node.js или Grunt.js, или хотите чтобы один метод LiveReload’а работал на всех платформах без изменений(LiveReload можно настроить и на Windows и на Linux и на MacOS X, но метод настройки везде разный) то можно использовать grunt-reload.
Итак, вот что понадобиться:

1. Node.js. На Убунте к примеру ставим так:
   

         sudo apt-get install nodejs npm

2. Grunt.js
   

         sudo npm install -g grunt

3. Grunt плагин grunt-reload
   

         npm install grunt-reload --save-dev

Плагин grunt-reload кроме двух уже указанных способов livereload’a имеет еще пару вариантов:

1. Proxy: создает сервер, который будет проксировать запросы к dev. серверу добавляя к HTML файлам livereload сниппет. Избавляет от необходимости вручную обновлять html’ки для поддержки livereload.
2. iFrame: идентичен предыдущему методу, только вместо автоматического добавления сниппета, открывает страницы в iFrame, который перезагружает их при необходимости. И ваши html’ки останутся чистыми!;)

К сожалению, grunt-reload не поддерживает применение CSS и JS без перезагрузки всей страницы. Точнее поддерживает, но только с использованием LiveReload browser extension.

Как использовать

Создаем свой проект, в нем создаем grunt.js и в нем настраиваем задачу watch(она будет мониторить изменения в файлах) и задачу reload(при изменении файлов делаем livereload).

Например, имеем такой express.js проект:
/public — статика(CSS, images, JS, templates, etc)
app.js — express.js application
grunt.js — Gruntfile

grunt.js выглядит так:

module.exports = function(grunt) {    grunt.loadNpmTasks('grunt-bg-shell');   // подключаем grunt-reload   grunt.loadNpmTasks('grunt-reload');    // Project configuration.   grunt.initConfig({     bgShell: {       //Запускаем приложение с помощью supervisor'a       //Теперь при изменении серверного кода        //сервер перезапускается автоматически       supervisor: {             cmd: 'supervisor app.js',             stdout: true,             stderr: true,             bg: true       }     },     //настраиваем reload     //сервер приложения крутится на localhost:3000     //переходим на localhost:6001 и получаем то же приложение только с LiveReload     reload: {       port: 6001,       proxy: {         host: 'localhost',         port: 3000       },     },     watch: {       //при изменении любого из этих файлов запустить задачу 'reload'       files: [         //add here static file which need to be livereloaded         'public/styles/**/*.css',         'public/scripts/**/*.js',         'public/images/**/*',         ],       tasks: 'reload'     }   });    //стартуем приложение   //reload и на клиенте и на сервере   grunt.registerTask('server', 'bgShell:supervisor reload watch'); };   

Теперь из корневого каталога приложения можно запустить команду

grunt server

И получить автоматически перезапускаемый сервер и LiveReload на клиенте по адресу localhost:6001

Данный Gruntfile так-же использует пакет supervisor(для мониторинга сервера), и пакет grunt-bg-shell для запуска супервизора в бэкграунде

  sudo npm install -g supervisor   npm install grunt-bg-shell --save-dev