node.js - Livereload 在 gulp 中不起作用

Question

我使用了 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"]

Answer 1

我一直在使用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
    )