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

Автор: AzzNomad

Источник