लाइवरेलोड गल्प

Question

में काम नहीं कर रहा है मैंने गल्प-वेबएप (योनि से जनरेटर) का उपयोग किया और कुछ अन्य कार्यों को जोड़ा (जैसे गल्प-एसएएस & गिल्प-कॉफी)।

लेकिन अब लाइवरेलोड शुरू नहीं हो रहा है। मैं मुझे समझ नहीं आता इस

[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

मैं घूंट और 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 सर्वर समानांतर में चल रहे के कई उदाहरण करना चाहते हैं । पोर्ट 3572 9 का उपयोग करने का सुझाव केवल तभी होता है जब आप ब्राउज़र एक्सटेंशन का उपयोग कर रहे हों, जो आप नहीं हैं क्योंकि आप कनेक्ट मिडलवेयर का उपयोग कर रहे हैं।

आशा इस मदद करता है

Answer 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 
    ) 

Answer 3

लाइव पुनः लोड घूंट का उपयोग कर और एक्सप्रेस कोड के नीचे है करने के लिए बहुत आसान है

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

}); 

जब आप बदल एचटीएमएल, जे एस और

Answer 4

मैं मूल रूप से बदल रहा है सुझाव दिया सीएसएस फ़ाइल यह फिर से लोड कर रहे हैं बंदरगाह हालांकि लाइवरेलोड इसे एक विकल्प के रूप में पसंद नहीं करता है। आपको क्या करने की जरूरत है को मारने सेवा बंदरगाह 35,729 पर चल रहा है, तो आप टर्मिनल से निम्न आदेश चलाकर ऐसा करते हैं:

lsof -iTCP:35729 

यह तो आप इस बंदरगाह पर चल proccesses की एक सूची दे देंगे, पहले लेने सूची में पीआईडी ​​यानी 3 9 6 9 फिर यह आदेश चलाएं:

kill -9 3996 

अब अपनी गल्प स्क्रिप्ट फिर से शुरू करें और यह संघर्ष नहीं करेगा।