Gulp 4 и BrowserSync reload?

Question

[Антон]

День добрый!
До 4го галпа, данный код работал, сейчас не было времени подробно вникнуть в вопрос, что там изменилось, единственное что понял - квадратные скобки поменялись на параметры функции.
НО...Меня напрягает, что в таске сасса перестал работать browserSync.reload, никакой перезагрузки после изменения сасс файла не происходит.
На тостере один коллега уже спрашивал про это, ему помогло создание отдельной функции reload, Как правильно в Gulp 4 настроить browserSync reload html, js?

Мне эта штука не помогла, либо я не понял, как ее в моем случае воткнуть.
Помогите совладать с этой бесовской штукой.

var gulp       	 = require('gulp');
var sass       	 = require('gulp-sass');
var browserSync 	 = require('browser-sync').create();
var autoprefixer 	 = require('gulp-autoprefixer');
var plumber 		 = require('gulp-plumber');

gulp.task('browser-sync', function() { 
    browserSync.init({
        server: {
            baseDir: './out' 
        },
        notify: false 
    });
	browserSync.watch('out/').on('change', browserSync.reload); 
});	

gulp.task('sass', function(){ 
    return gulp.src('app/scss/*.scss') 
	.pipe(plumber({
		errorHandler : function(err) {
			console.log(err);
			this.emit('end');
		}
	}))
		
	.pipe(sass({errLogToConsole: true}))
	.pipe(sass({outputStyle: 'compact'}))
	.pipe(autoprefixer({
		browsers: ['last 4 versions'],
		cascade: false
	}))
   .pipe(gulp.dest('out/assets/css')) 
   .pipe(browserSync.reload({stream: true})) 
});

gulp.task('watch', gulp.series('sass', 'browser-sync'), function() {
    gulp.watch('app/**/*.*', gulp.series('sass'));
});

Comments

[alex]

не было времени подробно вникнуть в вопрос

нет времени вникать, пойду лучше на тостер и задам очередной вопрос, который уже обсосан и облизан со всех сторон здесь

[Антон]

Alex, не было времени, потому что и так потратил 3 часа на поиски ответа, когда надо было разворачивать и начинать проект, в итоге я не сделал ни то, ни другое за сегодня.
За темами галпа не слежу, не знаю, как он тут обсосан, но за код спасибо.

Answer 1

[alex]

var gulp       	 = require('gulp');
var sass       	 = require('gulp-sass');
var browserSync 	 = require('browser-sync').create();
var autoprefixer 	 = require('gulp-autoprefixer');
var plumber 		 = require('gulp-plumber');

gulp.task('browser-sync', function(done) { 
  browserSync.init({
    server: {
      baseDir: './out'
    },
    notify: false
  });
  
  browserSync.watch('out/').on('change', browserSync.reload);
  
  done()
});	

gulp.task('sass', function(done){
  gulp.src('app/scss/*.scss')
    .pipe(plumber({
      errorHandler : function(err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(sass({errLogToConsole: true}))
    .pipe(sass({outputStyle: 'compact'}))
    .pipe(autoprefixer({
      browsers: ['last 4 versions'],
      cascade: false
    }))
   .pipe(gulp.dest('out/assets/css'))
   .pipe(browserSync.reload({stream: true}));
  
  done()
});

gulp.task('watch', gulp.series('sass', 'browser-sync', function(done) {
  gulp.watch('app/**/*.*', gulp.series('sass'));
  
  done()
}));

Answer 2

[Сергей delphinpro]

Вы документацию-то гляньте. Там есть готовый пример
https://browsersync.io/docs/gulp#gulp-sass-css

Comments

[Martovitskiy]

там пример gulp 3
Ниже указано If you are using gulp 4.x.x now, then you can follow this documentation . Битая ссылка.

[Сергей delphinpro]

Ссылку эту не трудно найти в репозитории — https://github.com/gulpjs/gulp/blob/master/docs/re...

Но там ничего нового нет.

Я как раньше использовал метод reload для перезагрузки, так и использую:

gulp.src(src, {allowEmpty: true})

            .on('end', () => {
                if (DEVELOPMENT && bs.has(config.browserSync.instanceName)) {
                    let bsInstance = bs.get(config.browserSync.instanceName);
                    bsInstance.notify('Javascript compiled', 1000);
                    bsInstance.reload();
                }

                done();
            })

            .pipe(gulpIf(DEVELOPMENT, sourceMaps.init()))
...

Как раньше использовал stream для инжекта стилей, так и использую:

.pipe(bs.get(config.browserSync.instanceName).stream());

С переходом на gulp4 в этом плане совершенно ничего не поменялось.

-----
И, кстати, эта запись слегка устарела:
browserSync.reload({stream: true})
Данная опция конечно оставлена для обратной совместимости, но лучше уже завязывать так писать.

[Антон]

Да, смотрел эту страницу, но как верно заметил Martovitskiy , там был пример для 3 версии, но к сожалению, ссылку для четвертой я не увидел.
Галп ставлю раз в пятилетку, и то только потому начал заново ставить, что компьютер поменял, а тут такие подводные камни, нужно проект начинать, а тут ни черта не пашет, пришлось лезть сюда после часов неудачных попыток завести релоуд

Answer 3

[Полина]

Самый простой рабочий пример для 4-го gulp'а: https://medium.com/swlh/setting-up-gulp-4-0-2-for-...
Пример значительно проще, чем Minimal BrowserSync setup with Gulp 4