Livereload 在 gulp 中不起作用答案

【问题标题】：Livereload isn't working in gulpLivereload 在 gulp 中不起作用
【发布时间】：2014-06-12 19:38:10
【问题描述】：

我使用 gulp-webapp（来自 yeoman 的生成器）并添加了一些其他任务（如 gulp-sass 和 gulp-coffee）。

但是现在 Livereload 没有启动。我需要看到这样的东西

[gulp] Live reload server listening on: 35729

但输出看起来像

➜  app git:(master) ✗ gulp watch
[gulp] Using gulpfile ~/Dev/lsd/app/gulpfile.js
[gulp] Starting 'clean'...
[gulp] Starting 'styles'...
[gulp] Starting 'scripts'...
[gulp] Starting 'connect'...
[gulp] Finished 'connect' after 68 ms
Started connect web server on http://localhost:9000
[gulp] Finished 'scripts' after 181 ms
[gulp] gulp-size: total 128.75 kB
[gulp] Finished 'styles' after 806 ms
[gulp] Starting 'serve'...
[gulp] Finished 'serve' after 5.73 ms

我不明白，我的问题是什么。

我的gulpfile.coffee：

"use strict"

gulp = require("gulp")
$ = require("gulp-load-plugins")()

gulp.task "styles", ->
  gulp.src("app/styles/main.scss").pipe($.sass()).pipe($.autoprefixer("last 1 version")).pipe(gulp.dest(".tmp/styles")).pipe $.size()

gulp.task "scripts", ->
  gulp.src("app/scripts/**/*.coffee").pipe($.coffee()).pipe gulp.dest(".tmp/scripts")

gulp.task "html", [
  "styles"
  "scripts"
], ->
  jsFilter = $.filter("**/*.js")
  cssFilter = $.filter("**/*.css")
  gulp.src("app/*.html").pipe($.useref.assets()).pipe(jsFilter).pipe($.uglify()).pipe(jsFilter.restore()).pipe(cssFilter).pipe($.csso()).pipe(cssFilter.restore()).pipe($.useref.restore()).pipe($.useref()).pipe(gulp.dest("dist")).pipe $.size()

gulp.task "clean", ->
  gulp.src([
    ".tmp"
    "dist"
  ],
    read: false
  ).pipe $.clean()

gulp.task "build", [
  "html"
  "fonts"
]
gulp.task "default", ["clean"], ->
  gulp.start "build"

gulp.task "connect", ->
  connect = require("connect")
  app = connect().use(require("connect-livereload")(port: 35729)).use(connect.static("app")).use(connect.static(".tmp")).use(connect.directory("app"))
  require("http").createServer(app).listen(9000).on "listening", ->
    console.log "Started connect web server on http://localhost:9000"

gulp.task "serve", [
  "styles"
  "scripts"
  "connect"
], ->
  require("opn") "http://localhost:9000"

gulp.task "watch", [
  "clean"
  "serve"
], ->
  server = $.livereload()
  gulp.watch([
    "app/*.html"
    ".tmp/styles/**/*.css"
    ".tmp/scripts/**/*.js"
  ]).on "change", (file) ->
    server.changed file.path

  gulp.watch "app/styles/**/*.scss", ["styles"]
  gulp.watch "app/scripts/**/*.coffee", ["scripts"]

【问题讨论】：

我在依赖包含 livereload 调用的任务时遇到了同样的问题。
仅供参考。您可以打破线条，使每个管道都在自己的行上并缩进。否则可能会失去理智。
这里是清理版：gist.github.com/sukima/b5a2d145a1b34dece7f9
require("opn") 也是正确的吗？
很好奇，有没有人试过我的答案。因为我知道它有效。我现在正在使用它。查看我的工作 server 文件

标签： node.js gulp livereload

【解决方案1】：

我使用 gulp 和 livereload，它们都运行良好。
看看here。这是我用于开发目的的服务器任务。它正在完全工作。

此片段正在测试

http = require "http"
path = require "path"
Promise = Promise or require("es6-promise").Promise
express = require "express"
gulp = require "gulp"
{log} = require("gulp-util")
tinylr = require "tiny-lr"
livereload = require "gulp-livereload"

ROOT = "dist"
GLOBS = [path.join(ROOT, "/**/*")]
PORT = 8000
PORT_LR = PORT + 1

app = express()
app.use require("connect-livereload") {port: PORT_LR}
app.use "/", express.static "./dist"

http.createServer(app).listen PORT, ->
  log "Started express server on http://localhost: #{PORT}"

lrUp = new Promise (resolve, reject) ->
  lrServer = tinylr()
  lrServer.listen PORT_LR, (err) ->
    return reject(err)  if err
    resolve lrServer

gulp.watch GLOBS, (evt) ->
  return if evt.type is "deleted"

  lrUp.then (lrServer) ->
    log "LR: reloading", path.relative(ROOT, evt.path)
    gulp.src(evt.path).pipe livereload(lrServer)

请注意，我使用不同的端口进行 livereload (9001)，我这样做是因为您经常希望让 livereload 服务器的多个实例并行运行。仅当您使用浏览器扩展程序时才建议使用端口 35729，因为您使用的是连接中间件。

希望对你有帮助

【讨论】：

【解决方案2】：

我一直在使用gulp-webserver。它使 LiveReload 的使用变得非常简单。

gulp = require 'gulp'
webserver = 'gulp-webserver'
path = 'path'

gulp.task "webserver", ->
    gulp.src(path.resolve("./dist")).pipe webserver(
        port: "8080"
        livereload: true
    )

【讨论】：

【解决方案3】：

Live reload 很容易使用 gulp 和表达代码如下

var gulp = require('gulp'); 
gulp.task('express', function() {   
  var express = require('express');
  var app = express();   
  app.use(require('connect-livereload')({port: 4002}));
  app.use(express.static(__dirname));   
  app.listen(4000); 
});


var tinylr; 
gulp.task('livereload', function() {   
 tinylr = require('tiny-lr')();   
 tinylr.listen(4002); 
});


function notifyLiveReload(event) {   
 var fileName = require('path').relative(__dirname, event.path);   
 tinylr.changed({
        body: {
          files: [fileName]
        }  
    });
}

gulp.task('watch', function() {  
  gulp.watch('*.html', notifyLiveReload);  
  gulp.watch('js/*.js', notifyLiveReload);    
  gulp.watch('css/*.css', notifyLiveReload); 
});

gulp.task('default', ['express', 'livereload', 'watch'], function() {

});

当您更改 html、js 和 css 文件时，它将重新加载

【讨论】：

【解决方案4】：

我最初建议更改端口，但是 livereload 不喜欢这个选项。您需要做的是终止在端口 35729 上运行的服务，您可以通过从终端运行以下命令来执行此操作：

lsof -iTCP:35729

这将为您提供在此端口上运行的进程列表，选择列表中的第一个 PID，即 3996，然后运行以下命令：

 kill -9 3996

现在再次启动您的 gulp 脚本，它不会发生冲突。

【讨论】：