2015-01-13 76 views
2

我有這樣的代碼來重新加載任何更改瀏覽器:通過html.js我在這裏觸發browserSyncbrowserSync不工作

var gulp   = require('gulp'); 
var browserSync = require('browser-sync'); 

gulp.task('browser-sync', function() { 
    browserSync({ 
     server: { 
      baseDir: "./" 
     } 
    }); 

}); 

,:

var gulp  = require('gulp'); 
var browserSync = require('browser-sync'); 
var fileinclude = require('gulp-file-include'); 
var rename  = require('gulp-rename'); 
var util  = require('gulp-util'); 

gulp.task('html', function() { 

    var filename = 'middle.html'; 

    return gulp.src(filename) 
     .pipe(fileinclude()) 
     .pipe(rename('index.html')) 
     .pipe(gulp.dest('./')) 
     .pipe(browserSync.reload({stream:true})); 
}); 

出於某種原因,HTML。 JS似乎工作(文件包括,重命名等...完成),但browserSync沒有。我沒有收到任何錯誤消息,但瀏覽器不會自動重新加載。有任何想法嗎?

謝謝!

+0

你有沒有在你的HTML得到了Browsersync的Javascript? – nils

+0

不,我把它放在任務文件夾中的單獨文件(browserSync.js)中,與html.js相同 –

+0

如果您在瀏覽器中加載頁面,是否可以找到browsersync javascript標記?它應該是這樣的:'document.write(「

1

以下技術爲我工作。

對於

  • 自動重新加載的Html你應該使用browserSync.reload
  • CSS使用browserSync.stream()

var gulp = require('gulp'); 
 
var sass = require('gulp-sass'); 
 
var watch = require('gulp-watch'); 
 

 
var browserSync = require('browser-sync').create(); // for live-editing 
 

 
gulp.task('default', function(){ 
 

 
\t // Serve files from the root of this project 
 
\t browserSync.init({ 
 
\t  \t server: "./" 
 
\t }); 
 
\t 
 
\t gulp.watch('sass/**/*.scss', ['styles']); 
 

 
\t //-----***** RELOADING of HTML *****----- 
 
\t gulp.watch("*.html").on("change", browserSync.reload); 
 
\t 
 
}); 
 

 

 
gulp.task('styles', function(){ 
 

 
\t gulp.src('sass/**/*.scss') 
 
\t 
 
\t .pipe(sass().on('error', sass.logError))  \t 
 
    
 
    \t .pipe(gulp.dest('./css')) 
 

 
\t //-----***** RELOADING of CSS *****----- 
 
\t .pipe(browserSync.stream()); \t 
 
});