2

変更を加えてブラウザをリロードする次のコードがあります。

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

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

});

ここで、html.js を介して browserSync をトリガーしています。

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 は動作しているように見えますが (fileinclude、名前の変更などは行われています)、browserSync は動作しません。エラー メッセージは表示されませんが、ブラウザが自動的にリロードされません。何か案は？

ありがとう！

4

2 に答える 2

3

以下のテクニックは私のために働いた。

の自動リロード用

  • browserSync.reloadを使用する必要があるHTML
  • 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(){

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

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


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

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

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

于 2016-03-08T11:24:30.033 に答える
0

したがって、これが問題であるかどうかは 100% わかりませんが、これを試してください。browser-sync タスクを watch タスクに追加して、設定を読み込みます。

var gulp = require('gulp');
gulp.task('watch', ['browser-sync'], function() { // Add your browser-sync task to the watch task
    gulp.watch([ 'html/*' ], ['html']);
    gulp.watch([ '.html' ], ['html']);
    gulp.watch([ 'js/' ], ['html']);
    gulp.watch([ 'css/*' ], ['html']);
    gulp.watch([ 'css/*', ], ['sass']);
});

次に、ブラウザ同期設定を修正して、css の変更をブラウザに挿入します。

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

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

});

それがどうなるか教えてください。

于 2015-01-15T10:26:57.507 に答える