2014-02-20 3 views
9

Я изо всех сил пытаюсь получить возможность «живой перезагрузки» Grunt (как реализовано в grunt-contrib-watch) для работы в моем приложении. Я, наконец, укусил пулю и попытался сделать минимальный пример. Надеюсь, кто-то может легко заметить, чего не хватает.Почему не работает работа в руке?

Структура файла:

├── Gruntfile.js 
├── package.json 
├── index.html 

package.json

{ 
    "name": "livereloadTest", 
    "version": "0.1.0", 
    "devDependencies": { 
    "grunt": "~0.4.2", 
    "grunt-contrib-watch": "~0.5.3" 
    } 
} 

Gruntfile.js

module.exports = function(grunt) { 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     watch: { 
      src: { 
       files: ['*.html'], 
       options: { livereload: true } 
      } 
     } 
    }); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
}; 

index.html

<!doctype html> 
<html> 
<head><title>Test</title></head> 
<body> 

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

</body> 
</html> 

Я затем запустить grunt watch и ничего взрывает. Однако ни одно окно браузера не открывается автоматически (должно ли оно?).

Когда я открываю хром на http://localhost:35729/ я получаю это: JSON

{"tinylr":"Welcome","version":"0.0.4"} 

и пытается любой другой путь на этом порту дает мне

{"error":"not_found","reason":"no such route"} 

ответ

16

http://localhost:35729/ является URL-адрес для живого сервера перегрузочной. Он используется только для управления живой перезагрузкой, а не для обслуживания вашего фактического веб-сайта.

Как правило, можно использовать grunt-contrib-connect для обслуживания статических сайтов с ворчанием. Затем просмотрите их сайт, перейдя на localhost: 8000 или там, где вы настроили его для проживания. Но в зависимости от ваших потребностей это могут быть файлы apache, nginx и т. Д.

Существует опция livereload на grunt-contrib-connect, а также. Это только вводит тег <script src="//localhost:35729/livereload.js"></script> в ваш HTML и ничего больше.

+2

Это работает! Благодаря! Я хочу, чтобы документация * watch * была немного понятнее, что требуется что-то вроде этого ... –

7

Вот очень простой способ, как вы могли это установить. Просто убедитесь, что установлены плагины grunt-contrib-watch и grunt-contrib-connect. Это предполагает, что ваш Gruntfile.js находится в корневом каталоге вашего проекта. также обязательно добавьте <script src="//localhost:35729/livereload.js"></script> непосредственно перед закрывающим тегом тела </body> и у вас есть файл index. Когда вы вводите grunt server в терминал, перейдите к http://localhost:9000, и вы должны быть настроены.

module.exports = function(grunt) { 

    grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 

    watch: { 
    options: { 
     livereload: true, 
    }, 
    css: { 
     files: ['css/**/*.css'], 
    }, 
    js: { 
     files: ['js/**/*.js'], 
    }, 
    html: { 
     files: ['*.html'], 
    } 
    }, 
    connect: { 
    server: { 
     options: { 
     port: 9000, 
     base: '.', 
     hostname: '0.0.0.0', 
     protocol: 'http', 
     livereload: true, 
     open: true, 
     } 
    } 
    }, 
}); 


grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-connect'); 

grunt.registerTask('server', ['connect','watch']); 

}; 
+1

этот код работает !! – ambes

+0

Я не мог понять, как сделать работу с печью, но посмотрев вашу конфигурацию и добавив имя хоста и печенье в параметры подключения/сервера /, сделал трюк – Juancho

+3

Нет, нет, нет, нет, '' НЕ следует добавлять вручную. Он будет автоматически инжектироваться плагином 'grunt-contrib-connect', если все сделано правильно. Вы не хотите, чтобы возиться с развернутой версией –

 Смежные вопросы

  • Нет связанных вопросов^_^