12

I have this gulpfile.js file:

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']);

Please tell me what are the difference between:

.pipe(browserSync.stream());

and:

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

I need both of them? they have different role?

Thanks.

ronjacob
  • 169
  • 1
  • 7

1 Answers1

28

You probably must have got your answer till now but I'll leave the answer here just in case anyone needs to know.

browserSync.reload

is used to do a page refresh. Ideally, it's used on HTML & JS files.

browserSync.stream

is used to inject changes without refreshing the page. Ideally, this is used on CSS and other stylesheet formats. This command is useful because it keeps the scroll position intact and doesn't take you to the top of the page like a page refresh usually would.

Yash Ghelani
  • 397
  • 3
  • 6
  • From the docs, "The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible." So it's not true that the primary difference is that reload refreshes the browser while stream injects changes. – Neil VanLandingham Dec 19 '18 at 14:53