@Gudvin4
Пока я только учусь

Как настроить gulp Browsersync что бы он работал с удаленным сервером?

Здравствуйте, уважаемые участники сообщества!
Я установил на сервер хостинга дистриб. битрикса, подключил проект к phpstorm.
Запускаю gulp, все работает компилируется, но browsersync ведет себя как-то неадекватно. Например, добавляю стили к проекту, они компилируются деплоятся на сервер, в терминале видно что browsersync отрабатывает, но изменений не видно в браузере, дописываю еще стиль, все отрабатывает и в браузере видно изменения, но они от предыдущей как бы компиляции sass. И вот так срабатывает через раз. PHP файлы нормально синхронизируются, а стили не хотят никак работать с browsersync. Помогите, пожалуйста начинающему неумехе разобраться. Я вам клянусь, пару дней пытался сам решить этот вопрос и видел в том числе и на этом уважаемом ресурсе темы подобные, но там вроде не про мою проблему речь идет. Или я ничего не понял из них.
Структура gulpfile.js
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'),
		del            = require('del'),
		imagemin       = require('gulp-imagemin'),
		cache          = require('gulp-cache'),
		autoprefixer   = require('gulp-autoprefixer'),
		ftp            = require('vinyl-ftp'),
		notify         = require("gulp-notify"),
		rsync          = require('gulp-rsync');

gulp.task('common-js', function() {
	return gulp.src([
		'src/js/common.js',
		])
	.pipe(concat('common.js'))
	//.pipe(uglify())
	.pipe(gulp.dest('local/templates/vertikal/js/'))
	.pipe(browserSync.reload({stream: true}));
});

gulp.task('js', function() {
	return gulp.src([
		'src/libs/superfish/dist/js/superfish.min.js',
		'src/libs/jQuery.mmenu/dist/jquery.mmenu.all.js',
		'src/libs/jQuery.mmenu/dist/addons/fixedelements/jquery.mmenu.fixedelements.js',
		'src/libs/magnific-popup/dist/jquery.magnific-popup.min.js',
		'src/libs/owl.carousel/dist/owl.carousel.min.js',
		'src/libs/phone_mask.js',

		])
	.pipe(concat('scripts.js'))
	// .pipe(uglify()) 
	.pipe(gulp.dest('local/templates/vertikal/js/'))
	.pipe(browserSync.reload({stream: true}));
});

gulp.task('browser-sync', function() {
	browserSync({
		proxy: 'dev.paradigma-ekb.ru',
		notify: false,
	});
});

gulp.task('sass', function() {
	return gulp.src('src/sass/**/*.sass')
	.pipe(sass({outputStyle: 'expand'}).on("error", notify.onError()))
	.pipe(rename({suffix: '', prefix : ''}))
	.pipe(autoprefixer(['last 15 versions']))
	.pipe(cleanCSS())
	.pipe(gulp.dest('local/templates/vertikal/'))
	.pipe(browserSync.reload({stream: true}));
});

gulp.task('header_style', function() {
	return gulp.src('src/sass/header.sass')
	.pipe(sass({outputStyle: 'expand'}).on("error", notify.onError()))
	.pipe(rename({suffix: '', prefix : ''}))
	.pipe(autoprefixer(['last 15 versions']))
	.pipe(cleanCSS())
	.pipe(gulp.dest('local/templates/vertikal/css/'))
	.pipe(browserSync.reload({stream: true}));
});

gulp.task('watch', ['sass', 'js', 'common-js', 'browser-sync'], function() {
	gulp.watch('src/sass/**/*.sass', ['sass']);
	gulp.watch(['src/libs/**/*.js', 'src/js/common.js'], ['js']);
	gulp.watch('**/*.php', browserSync.reload);
});

gulp.task('imagemin', function() {
	return gulp.src('src/img/**/*')
	.pipe(cache(imagemin()))
	.pipe(gulp.dest('local/templates/vertikal/images'));
});

gulp.task('default', ['watch']);

Стили и скрипты подключены так:
<?
    if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
      die();
    $assets = \Bitrix\Main\Page\Asset::getInstance();
    ?>
    <!DOCTYPE html>
    <html>
    <head>
      <?$APPLICATION->ShowHead() ;?>
      <title><?$APPLICATION->ShowTitle() ;?></title>
      <?
      CJSCore::Init(array('jquery'));
      $assets->addCss(SITE_TEMPLATE_PATH . '/css/bootstrap.css');
      $assets->addCss(SITE_TEMPLATE_PATH . '/css/header.css');
      $assets->addJs(SITE_TEMPLATE_PATH . '/js/scripts.js');
      $assets->addJs(SITE_TEMPLATE_PATH . '/js/common.js');
      ?>
      <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

  • Вопрос задан
  • 388 просмотров
Решения вопроса 1
@eustatos
Стили и скрипты кешируются. Поэтому ничего не изменяется при перезагрузке браузера. Нужно либо добавить хеш к названию подлючаемых стилей или скриптов, или каждый раз сбрасывать кеш, или поставить в настройках сайта не хранить кеш.
eb7998d2bfe9493185e45762762cce4f.png
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы