Как использовать grunt-contrib-livereload?

Question

Я пытаюсь использовать grunt-contrib-livereload, но, похоже, не понял. The readme, кажется, пропускает все, что мне нужно объяснить, а затем заканчивается примером, который не работает, когда я пытаюсь его использовать и не кажется непосредственно связанным с документацией. Я искал лучшее объяснение в блоге или учебнике или что-то еще, но не смог его найти. Может кто-нибудь объяснить, как начать работу с этим инструментом?

Вот те вопросы, которые я имею, основанный на the readme:

В документации сказано, задача LiveReload «должен быть передан список файлов, которые были изменены» --- но как передать его этот список файлов? Пример, похоже, не иллюстрирует это. Учитывает ли этот список?

Требуется ли grunt-contrib-connect? Что он делает и как его использовать? Нужно ли мне учиться подключиться, прежде чем пытаться использовать функцию загрузки?

В readme упоминается промежуточное ПО, которое «должно быть первым вставлено» --- но вставлено в что, до чего еще? И как он вставлен?

И я полагаю, я не понимаю, как мне нужно управлять портами. «Все браузеры, прослушивающие порт печной почты, будут перезагружены», но откуда я узнаю, какой браузер прослушивает какой порт? Нужно ли мне все узнать о портах, прежде чем я смогу попробовать использовать функцию «загрузка»? (Любое предложение о том, как лучше всего узнать об этом?)

Наконец, в этом примере есть функция folderMount, которая, похоже, не связана с какой-либо документацией. Что это, и мне оно нужно?

Я предполагаю, что я прошу, если кто-то может понравиться:

• точка меня к учебник, который является гораздо более эффективным, чем текущий ридми;
• объясните эти необъяснимые части readme, если эти ответы - это то, что мне нужно, чтобы понять плагин;
• или предоставить функциональный пример с некоторым объяснением причин его функциональности.

Answer 1

Живая перезарядка теперь встроена в grunt-contrib-watch версии 0.4.0. grunt-contrib-livereload и grunt-regarde будут устаревшими.

Теперь просто установите параметр livereload в true в вашей конфигурации, и он будет создавать то живой сервер перезагрузить перезагрузку после задания закончилось:

grunt.initConfig({ 
    watch: { 
    all: { 
     options: { livereload: true }, 
     files: ['lib/*.js'], 
     tasks: ['jshint'], 
    }, 
    }, 
}); 

По умолчанию живого сервер перезагрузки будет запущен на порт 35729 , Поэтому, чтобы включить живую перезагрузку на вашей странице, просто добавьте <script src="http://localhost:35729/livereload.js"></script> на свою страницу.

Посмотреть подробнее на документы: https://github.com/gruntjs/grunt-contrib-watch#live-reloading

Answer 2

Редактировать: Проверить информацию о версии. grunt-contrib-watch теперь имеет опору для печенки, запеченная в.

Что такое doozy. Я столкнулся с проблемами с этим, поэтому позвольте мне сделать все возможное, чтобы объяснить (или, по крайней мере, запустить вас). Имейте в виду, что это I У меня есть настройка и, похоже, она работает большую часть времени.

Для начала вам нужно убедиться, что вы обманули свой package.json с правильными зависимостями. Я не уверен, что работа с печью работает с запеченной в «часах» задаче, и я использую в последнее время grunt-regarde. Мой package.json обычно выглядит следующим образом:

"dependencies": { 
    "grunt": "~0.4.x", 
    "grunt-contrib-livereload": "0.1.2", 
    "grunt-contrib-connect": "0.2.0", 
    "grunt-regarde": "0.1.1" 
}, 

Obvi вы хотите пехотинец (duhhh), LiveReload, подключение, кажется, помогает с монтажными папками и Regarde, как пехотинец-часы, это только кажется, что лучше работать (я забыть, почему именно).

Вы могли бы сделать ваш package.json еще лучше, указав функцию перегрузки в своем собственном объекте «devDependencies», если вы так склонны.Теперь запустите свой старый добрый npm install, чтобы получить лакомства в вашем проекте.

Давайте говорить gruntfiles:

Как вы, наверное, знаете, gruntfile является то, что делает волшебство произойдет. Где-то в нижней части вашего gruntfile, вы хотите, чтобы указать

grunt.loadNpmTasks('grunt-regarde'); 
grunt.loadNpmTasks('grunt-contrib-livereload'); 
grunt.loadNpmTasks('grunt-contrib-connect'); 

В верхней части gruntfile, мы хотим, чтобы добавить некоторые утилиты для LiveReload. Под /*global module:false*/, добавьте var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;.

После этого вам не нужно изучать связь, вы просто должны ее использовать. Проверьте мой стиль:

var folderMount = function folderMount(connect, point) { 
    return connect.static(path.resolve(point)); 
}; 

Это происходит, прежде чем module.exports = function(grunt) {

Теперь давайте перейдем к мясу gruntfile. Опять же, я забываю, что делает соединение, но именно здесь начинается магия промежуточного программного обеспечения. В ваших modules.exports добавьте:

connect: { 
    livereload: { 
    options: { 
     port: 9999, 
     middleware: function(connect, options) { 
     return [lrSnippet, folderMount(connect, '.')] 
     } 
    } 
    } 
}, 

Теперь мы хотим, чтобы файлы просматривались. Мне нравится настраивать несколько разных задач, так как я не хочу, чтобы весь процесс рутинга выполнялся каждый раз, когда я сохраняю файл CSS. Вот что я работаю с (опять же, добавить к module.exports):

regarde: { 
    txt: { 
    files: ['styles/*.css', 'index.html'], 
    tasks: ['livereload'] 
    }, 
    styles: { 
    files: ['sass/*.scss', 'sass/*/*.scss'], 
    tasks: ['compass'] 
    }, 
    templates: { 
    files: ['templates/*.jade'], 
    tasks: ['jade'] 
    } 
}, 

Вы можете видеть, что я только хотят LiveReload огонь, когда были внесены изменения в моей скомпилированный CSS (*.css) или к моему скомпилированный HTML. Если я отредактирую файл SCSS, я хочу отключить только компас. Если я редактирую шаблон нефрита, я хочу только запустить jade в компилятор HTML. Я думаю, вы можете видеть, что происходит. Вы можете играть с этим, просто будьте умны, потому что вы можете попасть в бесконечный цикл.

Наконец, вам необходимо устранить эти процессы. Мне нравится привязывать их всех к моей главной задаче grunt, потому что мой файл grunt только , что сладкий.

// Default task. 
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']); 

Теперь, когда вы запускаете grunt в CLI, вы должны (надеюсь, может быть, скрестите пальцы) получить что-то вроде этого:

Running "connect:livereload" (connect) task 
Starting connect web server on localhost:9999. 

Просмотр в http://localhost:9999/yourpage.html и смотреть магии случиться.

full gruntfile here.full package.json here.

Answer 3

Here is a solution на основе Gulp вместо Grunt и последующего Gulpfile.js получить livereload работу:

var gulp = require('gulp'); 
var connect = require('connect'); 
var connectLivereload = require('connect-livereload'); 
var opn = require('opn'); 
var gulpLivereload = require('gulp-livereload'); 

var config = { 
    rootDir: __dirname, 
    servingPort: 8080, 

    // the files you want to watch for changes for live reload 
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js'] 
} 

// The default task - called when you run `gulp` from CLI 
gulp.task('default', ['watch', 'serve']); 

gulp.task('watch', ['connect'], function() { 
    gulpLivereload.listen(); 
    gulp.watch(config.filesToWatch, function(file) { 
    gulp.src(file.path) 
     .pipe(gulpLivereload()); 
    }); 
}); 

gulp.task('serve', ['connect'], function() { 
    return opn('http://localhost:' + config.servingPort); 
}); 

gulp.task('connect', function(){ 
    return connect() 
    .use(connectLivereload()) 
    .use(connect.static(config.rootDir)) 
    .listen(config.servingPort); 
}); 
 

Answer 4

Я знаю, что это немного старые, но может кому-то помочь , В Gruntfile.js добавить "варианты":

sass: { 
    files: 'scss/**/*.scss', 
    tasks: ['sass'], 
    options: { 
     livereload: true, 
    } 
    } 

В индексной оных:

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