Livereload nie działa w gulpu

Question

Użyłem gulp-webapp (generator od damy) i dodam kilka innych zadań (jak gulp-sass & gulp-coffee).

Ale teraz Livereload się nie uruchamia. Muszę zobaczyć coś takiego

[gulp] Live reload server listening on: 35729 

Ale wyjście wygląda

➜ 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 

A ja nie rozumiem, co jest moim problemem.

My 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

używam łyk iz livereload i wszystkie one pracują świetnie.
spójrz na here. To jest zadanie serwera, którego używam do celów programistycznych. Jest w pełni działa.

Ten snipped jest testowany

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) 

Uwaga używam innego portu dla livereload (9001), I to zrobić, ponieważ często chcesz mieć wiele instancji serwera livereload uruchomiony równolegle . Propozycja użycia portu 35729 jest tylko wtedy, gdy używasz rozszerzenia przeglądarki, którego nie używasz, ponieważ używasz oprogramowania pośredniego do łączenia.

Nadzieja to pomaga

Answer 2

Używam gulp-webserver. To sprawia, że ​​używanie LiveReload jest bardzo proste.

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

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

Answer 3

żywo przeładowania jest bardzo łatwy w użyciu łyk i wyrazić kod jest poniżej

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() { 

}); 

gdy jesteś zmienić html, js i plików css będzie przeładować

Answer 4

pierwotnie zaproponował zmianę port jednak livereload nie preferuje tego jako opcji. Co trzeba zrobić, to zabić usługa działa na porcie 35729, można to zrobić, uruchamiając następującą komendę w terminalu:

lsof -iTCP:35729 

Będzie to daje listę proccesses uruchomionych na tym porcie, pick pierwszy PID z listy tzn 3996 uruchom polecenie:

kill -9 3996 

teraz uruchom skrypt haustem i znowu to konflikt przyzwyczajenie.