如何使用grunt-contrib-livereload？

Question

我試圖使用grunt-contrib-livereload，但似乎無法弄清楚。 The readme似乎跳過了我需要解釋的所有內容，然後以一個在我嘗試它時看起來不起作用但似乎與文檔沒有直接關係的示例結束。我在博客文章或教程中尋找了更好的解釋，但是一直沒有找到。有人可以解釋如何開始使用這個工具嗎？

這裏有各種各樣的我有疑問，基於the readme：

文檔說的livereload任務「必須傳遞已更改的文件列表」 ---但我怎麼通過它這個名單文件？這個例子似乎沒有說明這一點。貴賓是否通過了名單？

是否需要grunt-contrib-connect？它做什麼，以及如何使用它？在嘗試使用livereload之前，我需要學習連接嗎？

自述文件提到中間件「必須是第一個插入的」---但插入到什麼中，還有什麼其他的東西？它是如何插入的？

我想我不明白我需要如何操作端口。 「所有在livereload端口上監聽的瀏覽器都將被重新加載」---但我怎麼知道哪個瀏覽器正在監聽哪個端口？在嘗試使用livereload之前，我是否需要了解有關端口的所有信息？ （關於如何最好地瞭解這一點的任何建議？）

最後，在該示例中，有一個folderMount函數似乎與以前的任何文檔沒有關係。那是什麼，我需要它嗎？

我猜我問，如果有人可以取悅：

• 點我推向一個教程，比當前自述有效得多;
• 解釋自述文件中這些無法解釋的部分，如果這些答案是我需要了解該插件的;
• 或者提供一個功能性的例子，說明它爲什麼起作用。

Answer 1

現場重裝現在內置0.4.0grunt-contrib-watch版本。 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>添加到您的網頁。在文檔

查看更多信息：基於Gulp而不是Grunt及以下Gulpfile.jshttps://github.com/gruntjs/grunt-contrib-watch#live-reloading

Answer 2

編輯：檢查版本信息。 grunt-contrib-watch現在有生活支持烘烤英寸

什麼是doozy。我也遇到了這個問題，所以讓我做我能解釋的事情（或者至少讓你啓動並運行）。請記住，這是如何設置它，它似乎大多數時間工作。

對於初學者，您需要確保您的package.json具有正確的依賴關係。我不確定livereload是否適用於「watch」任務中的烘焙，而且我最近一直在使用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就像咕嚕手錶，它只是似乎更好的工作（我忘記爲什麼）。

如果您非常喜歡，可以通過在自己的「devDependencies」對象中指定livereload來使您的package.json更好。現在，運行你的好老東家npm install來獲得你的項目的好東西。

講起gruntfiles：

正如你可能知道，gruntfile是什麼使魔術發生。地方對你gruntfile的底部，你要指定

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

在你gruntfile的頂部，我們要添加一些utils的爲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文件，我想只發射指南針。如果我編輯一個玉石模板，我只想將玉石發射到HTML編譯器。我想你可以看到發生了什麼事情。你可以玩弄這個，只要聰明一些，因爲你可能陷入無限循環。

最後，您需要關閉這些進程。我喜歡把它們全部綁在我的主要任務上，因爲我的gruntfile只是那甜。

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

現在，當你在CLI火起來grunt，你應該（希望，也許，你的手指）得到這樣的：

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獲得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>