Livereload不在吞咽
我使用了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"]
我一直在使用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 )
我使用吞噬和生活，他们都很好。
看看这里 。 这是我用于开发目的的服务器任务。 这是充分的工作。
这剪断了正在testing
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的build议才是您使用连接中间件的原因。
希望这可以帮助
实时重载非常容易使用gulp并且expression代码如下
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文件的时候它会重新加载
我原来build议更改端口，但livereload不喜欢这个作为一个选项。 你需要做的是杀死端口35729上运行的服务，你可以通过在terminal上运行以下命令来实现：
lsof -iTCP:35729
这会给你一个在这个端口上运行的进程列表，select列表中的第一个PID，即3996，然后运行这个命令：
kill -9 3996
现在再次启动你的gulp脚本，它不会发生冲突。