Browsersync обновляет страницу только один раз, как исправить?

Question

[elenasavchenko]

Добрый день, уважаемые специалисты, подскажите в чем моя ошибка.
1. На OpenServer 5.2.2 Установлена CMS Open Cart 2.3.0.2
2. При редактировании файлов с расширением .tpl - browserSync только один раз обновляет страницу, при сохранении. Помогите, пожалуйста, найти ошибку, буду вам признательна.
3. Мой gulpfile.js:

var syntax         = 'sass', 
		gulpVersion    = '4'; 
		gmWatch        = false;

var gulp          = require('gulp'),
		gutil         = require('gulp-util' ),
		sass          = require('gulp-sass'),
		browserSync   = require('browser-sync'),
		concat        = require('gulp-concat'),
		uglify        = require('gulp-uglify'),
		cleancss      = require('gulp-clean-css'),
		rename        = require('gulp-rename'),
		autoprefixer  = require('gulp-autoprefixer'),
		notify        = require('gulp-notify'),
		rsync         = require('gulp-rsync'),
		imageResize   = require('gulp-image-resize'),
		imagemin      = require('gulp-imagemin'),
		del           = require('del');

// Local Server
gulp.task('browser-sync', function () {
	browserSync({
		proxy: 'shop.loc', 
		notify: false
	});
});

// TPL Live Reload
gulp.task('code', function () {
	return gulp.src('magic/catalog/view/theme/puma/template/common/*.tpl')
		.pipe(browserSync.reload({ stream: true }))
});

// Sass|Scss Styles
gulp.task('styles', function() {
	return gulp.src('app/'+syntax+'/**/*.'+syntax+'')
	.pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
	.pipe(rename({ suffix: '.min', prefix : '' }))
	.pipe(autoprefixer(['last 15 versions']))
	.pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.stream())
});

// JS
gulp.task('scripts', function() {
	return gulp.src([
		'app/libs/jquery/dist/jquery.min.js',
		'app/js/common.js', // Always at the end
		])
	.pipe(concat('scripts.min.js'))
	// .pipe(uglify()) // Mifify js (opt.)
	.pipe(gulp.dest('app/js'))
	.pipe(browserSync.reload({ stream: true }))
});

// Images @x1 & @x2 + Compression | Required graphicsmagick (sudo apt update; sudo apt install graphicsmagick)
gulp.task('img1x', function() {
	return gulp.src('app/img/_src/**/*.*')
	.pipe(imageResize({ width: '50%' }))
	.pipe(imagemin())
	.pipe(gulp.dest('app/img/@1x/'))
});
gulp.task('img2x', function() {
	return gulp.src('app/img/_src/**/*.*')
	.pipe(imageResize({ width: '100%' }))
	.pipe(imagemin())
	.pipe(gulp.dest('app/img/@2x/'))
});

// Clean @*x IMG's
gulp.task('cleanimg', function() {
	return del(['app/img/@*'], { force:true })
});

// If Gulp Version 3
if (gulpVersion == 3) {

	// Img Processing Task for Gulp 3
	gulp.task('img', ['img1x', 'img2x']);
	
	var taskArr = ['styles', 'scripts', 'browser-sync'];
	gmWatch && taskArr.unshift('img');

	gulp.task('watch', taskArr, function() {
		gulp.watch('app/'+syntax+'/**/*.'+syntax+'', ['styles']);
		gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['scripts']);
		gulp.watch('app/*.html', ['code']);
		gmWatch && gulp.watch('app/img/_src/**/*', ['img']);
	});
	gulp.task('default', ['watch']);

};

// If Gulp Version 4
if (gulpVersion == 4) {

	// Img Processing Task for Gulp 4
	gulp.task('img', gulp.parallel('img1x', 'img2x'));

	gulp.task('watch', function() {
		gulp.watch('magic/catalog/view/theme/puma/template/**/*.tpl', gulp.parallel('code'));
	});
	gmWatch ? gulp.task('default', gulp.parallel('img', 'styles', 'scripts', 'browser-sync', 'watch')) 
					: gulp.task('default', gulp.parallel('styles', 'scripts', 'browser-sync', 'watch'));

};

Answer 1

[Martovitskiy]

Добавьте функцию reload

function reload(done) {
  browserSync.reload();
  done();
}

и вызывайте в watch

Comments

[Martovitskiy]

Вот мой пример

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  browsersync   = require("browser-sync").create(),
  concat        = require('gulp-concat'),
  concatCSS     = require('gulp-concat-css'),
  uglify        = require('gulp-uglifyjs'),
  cssnano       = require('gulp-cssnano'),
  rename        = require('gulp-rename'),
  del           = require('del'),
  imagemin      = require('gulp-imagemin'),
  pngquant      = require('imagemin-pngquant'),
  cache         = require('gulp-cache'),
  autoprefixer  = require('gulp-autoprefixer'),
  htmlmin       = require('gulp-htmlmin'),
  gutil         = require( 'gulp-util' ),
  ftp           = require( 'vinyl-ftp' );
/*require('catalog/view/theme/default/stylesheet/')*/

function gulpSass() {
  return gulp
    .src('catalog/view/theme/default/stylesheet/sass/**/*.sass')
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(gulp.dest('catalog/view/theme/default/stylesheet/css'))
    .pipe(browsersync.stream())
}

function libsJs() {
  return gulp.src([
    'catalog/view/theme/default/libs/jquery/dist/jquery.js',
    'catalog/view/theme/default/libs/bootstrap/dist/js/bootstrap.js',
    'catalog/view/theme/default/libs/jquery.sticky.min.js',
    'catalog/view/theme/default/libs/slick-carousel/slick/slick.js',
  ])
    .pipe(concat('libs.min.js'))
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('catalog/view/javascript'))
}

function libsCss() {
  return gulp.src([
    'catalog/view/theme/default/libs/bootstrap/dist/css/bootstrap.css',
    'catalog/view/theme/default/libs/slick-carousel/slick/slick.css',
    'catalog/view/theme/default/libs/slick-carousel/slick/slick-theme.css',
    'catalog/view/theme/default/libs/animate.css/animate.css'
  ])
    .pipe(concatCSS('libs.css'))
    .pipe(gulp.dest('catalog/view/theme/default/stylesheet/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('catalog/view/theme/default/stylesheet/css'))
}

function browserSync(done) {
  browsersync.init({
    injectChanges: true,
    proxy: 'auntie-test',
    port: 3000,
    notify: false
  });
  done();
}

function clean() {
  return del(["dist"]);
}

function clear() {
  return cache.clearAll();
}

function images() {
  return gulp
    .src("assets/images/**/*")
    .pipe((cache(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.jpegtran({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true,
              use: [pngquant()]
            }
          ]
        })
      ])))
    )
    .pipe(gulp.dest("dist/assets/images"));
}

function watchFiles(done) {
  gulp.watch('catalog/view/theme/default/stylesheet/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('catalog/view/javascript/**/*.js', reload);
  gulp.watch('catalog/view/theme/default/**/*.twig', reload);
  done();
}

function buildFiles(done) {
  gulp.src([
    'assets/css/main.css',
    'assets/css/libs.min.css'
  ])
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'));

  gulp.src(
    'assets/js/libs.min.js')
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('assets/js/main.js')
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('assets/js/config-contact.js')
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('static**/*')
    .pipe(gulp.dest('dist'));

  gulp.src('php**/*')
    .pipe(gulp.dest('dist'));

  gulp.src('*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));

  gulp.src('*.txt')
    .pipe(gulp.dest('dist'));

  gulp.src('*.xml')
    .pipe(gulp.dest('dist'));

  gulp.src('.htaccess')
    .pipe(gulp.dest('dist'));
  done();
}
const watch = gulp.parallel(watchFiles, browserSync, libsCss, libsJs );
const build = gulp.series(clean, gulp.parallel(buildFiles, images, libsJs));

exports.clean = clean;
exports.clear = clear;
exports.watch = watch;
exports.build = build;

function reload(done) {
  browsersync.reload();
  done();
}

[Денис Никитин]

Martovitskiy, Не работает

Answer 2

[Денис Никитин]

Здравствуйте, у меня аналогичная проблема, если вы решили ее , то опишите, пожалуйста, как вы это сделали? Ниже мой Gulp файл:

var syntax        = 'scss', // Syntax: sass or scss;
		gulpversion   = '4'; // Gulp version: 3 or 4

var gulp          = require('gulp'),
		gutil         = require('gulp-util' ),
		sass          = require('gulp-sass'),
		browserSync   = require('browser-sync'),
		concat        = require('gulp-concat'),
		uglify        = require('gulp-uglify'),
		cleancss      = require('gulp-clean-css'),
		rename        = require('gulp-rename'),
		autoprefixer  = require('gulp-autoprefixer'),
		notify        = require('gulp-notify'),
		rsync         = require('gulp-rsync');

gulp.task('browser-sync', function() {
	browserSync({
		proxy: "Gerani",
		notify: false
	});
});

gulp.task('styles', function() {
	return gulp.src('catalog/view/theme/Gerani/stylesheet/stylesheet.scss')
	.pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
	.pipe(autoprefixer(['last 15 versions']))
	.pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
	.pipe(gulp.dest('catalog/view/theme/Gerani/stylesheet'))
	.pipe(browserSync.stream())
});

gulp.task('reload',  function() {
    browserSync.reload();
});

if (gulpversion == 4) {
	gulp.task('watch', function() {
		gulp.watch('catalog/view/theme/Gerani/stylesheet/stylesheet.scss', gulp.parallel('styles'));
		gulp.watch('catalog/view/theme/Gerani/template/**/*.twig',  gulp.parallel('reload'))
		gulp.watch('catalog/view/theme/Gerani/js/**/*.js');
		gulp.watch('catalog/view/theme/Gerani/libs/**/*');
	});
	gulp.task('default', gulp.parallel('styles', 'browser-sync', 'watch' , 'reload'));
}