Gulp livereload什麼都不做

如何設置gulp live-reload，它似乎沒有做任何事情。Gulp livereload什麼都不做

這是我gulpfile的一部分：

var livereload = require('gulp-livereload'), 
    lr = require('tiny-lr'); 

gulp.task('css', function(){ 
     gulp.src(sassdir) 
     .pipe(sass({style:'compressed'})) 
     .pipe(prefix('last 4 version')) 
     .pipe(gulp.dest(cssdir)) 
     .pipe(livereload(lr())); 
});

我試過一飲而盡連接併吞掉現場有和沒有的小-LR重裝。

如果有幫助，我使用主機pc窗口在流浪虛擬機（ubuntu）上運行apache webserver。 VM的靜態IP爲192.168.33.10。

來源

2014-03-31 Kiee

您需要啓動一個服務器，並讓它偵聽端口：

var gulp   = require('gulp'), 
    gutil  = require('gulp-util'), 
    server  = require('tiny-lr')(), 
    livereload = require('gulp-livereload'); 

gulp.task('watch', function() { 
    server.listen(35729, function(err) { 
     if (err) { 
      return gutil.log(err); 
     } 
     gulp.watch(sassdir, ['css']); 
     gutil.log('Watching source files for changes... Press ' + gutil.colors.cyan('CTRL + C') + ' to stop.'); 
    }) 
});

然後，以通知文件更改（並因此重新加載瀏覽器）服務器，你的CSS任務更改爲以下：

gulp.task('css', function(){ 
    return gulp.src(sassdir) 
     .pipe(sass({style:'compressed'})) 
     .pipe(prefix('last 4 version')) 
     .pipe(gulp.dest(cssdir)) 
     .pipe(livereload(server)); 
});

來源

2014-03-31 22:49:47 Ben

複製像對於像，仍然沒有骰子。 – Kiee

我正在使用它，它的工作原理。請記住，您必須使用livereload應用程序或瀏覽器擴展程序才能使其在瀏覽器中正常工作。對於Chrome，它的https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en - 只需啓動服務器，然後在瀏覽器中切換livereload即可。 – Ben

我安裝了擴展，它說，它的連接，仍然沒有變化:( – Kiee

看看你文件，也許他們正在損壞的發生更改時。

我遇到了同樣的問題，當我發現我的文件在我的主機上完全更新，但在瀏覽器中它們已損壞時，我開始研究與vagrant文件同步。

我發現sendfile選項需要在Web服務器中關閉。

在虛擬機只要打開你的server.conf文件，並添加選項：

對於nginx的：

sendfile off

對於Apache：

EnableSendfile off

我m使用gulp-livereload和chrome livereload插件，在我的webserver e中添加了這個選項後verything工作就像一個魅力:)

這裏有來源：

http://jeremyfelt.com/code/2013/01/08/clear-nginx-cache-in-vagrant/ http://www.mabishu.com/blog/2013/05/07/solving-caching-issues-with-vagrant-on-vboxsf/

來源

2014-07-29 14:02:34

這裏是一個simple and tested livereload solution基於connect服務器和connect-livereload和gulp-livereload插件上：

 

var gulp = require('gulp'); 
var connect = require('connect'); 
var connectLivereload = require('connect-livereload'); 
var opn = require('opn'); 
var gulpLivereload = require('gulp-livereload'); 

var config = { 
    rootDir: __dirname, 
    servingPort: 8080, 

    // the files you want to watch for changes for live reload 
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js'] 
} 

// The default task - called when you run `gulp` from CLI 
gulp.task('default', ['watch', 'serve']); 

gulp.task('watch', ['connect'], function() { 
    gulpLivereload.listen(); 
    gulp.watch(config.filesToWatch, function(file) { 
    gulp.src(file.path) 
     .pipe(gulpLivereload()); 
    }); 
}); 

gulp.task('serve', ['connect'], function() { 
    return opn('http://localhost:' + config.servingPort); 
}); 

gulp.task('connect', function(){ 
    return connect() 
    .use(connectLivereload()) 
    .use(connect.static(config.rootDir)) 
    .listen(config.servingPort); 
});

來源

2015-04-19 13:26:06

Gulp livereload什麼都不做

回答

相關問題