【问题标题】:browserSync.reload and browserSync.stream()) - what are the difference?browserSync.reload 和 browserSync.stream()) - 有什么区别?
【发布时间】:2018-02-16 17:30:59
【问题描述】:

我有这个 gulpfile.js 文件:

var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
browserSync = require('browser-sync').create();

gulp.task('sass', function() {
    gulp.src('assets/src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/dist/css'))
    .pipe(browserSync.stream());
});

gulp.task('scripts', function() {
    gulp.src('assets/src/js/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('assets/dist/js'));
}); 

gulp.task('server', ['sass','scripts'], function() {
    browserSync.init({
        proxy: 'http://localhost/example/',
    });
    gulp.watch('assets/src/sass/*.scss', ['sass']);
    gulp.watch('assets/src/js/*.js', ['scripts']);
    gulp.watch('./**/*.php').on('change', browserSync.reload);
});

gulp.task('server', ['run']);

请告诉我有什么区别:

.pipe(browserSync.stream());

和:

gulp.watch('./**/*.php').on('change', browserSync.reload);

两个都需要?他们有不同的作用?

谢谢。

【问题讨论】:

    标签: gulp browser-sync gulp-sass


    【解决方案1】:

    到目前为止,您可能已经得到了答案,但我会在此处留下答案,以防万一有人需要知道。

    browserSync.reload
    

    用于进行页面刷新。理想情况下,它用于 HTML 和 JS 文件。

    browserSync.stream
    

    用于在不刷新页面的情况下注入更改。理想情况下,这用于 CSS 和其他样式表格式。此命令很有用,因为它可以保持滚动位置不变,并且不会像页面刷新通常那样将您带到页面顶部。

    【讨论】:

    • 来自文档,“reload 方法将通知所有浏览器有关更改的文件,并且会导致浏览器刷新或在可能的情况下注入文件。”因此,主要区别在于重新加载刷新浏览器而流注入更改是不正确的。
    猜你喜欢
    • 1970-01-01
    • 2010-10-02
    • 2011-12-12
    • 2010-09-16
    • 2012-03-14
    • 2012-02-06
    • 2011-02-25
    • 2011-11-22
    • 2015-03-26
    相关资源
    最近更新 更多