How to set up gulp Browsersync to work with a remote server?

E

Evgeny Olshansky2017-08-22 11:56:17

1C-Bitrix

Evgeny Olshansky, 2017-08-22 11:56:17

Hello dear community members!
I installed distribution on the hosting server. Bitrix, connected the project to phpstorm.
I run gulp, everything works, it compiles, but browsersync behaves somehow inappropriately. For example, I add styles to the project, they are compiled and deployed to the server, in the terminal you can see that browsersync is working, but the changes are not visible in the browser, I add another style, everything works out and the changes are visible in the browser, but they are from the previous sass compilation. And this is how it works one time. PHP files are normally synchronized, and styles do not want to work with browsersync in any way. Please help a beginner to understand. I swear to you, I tried to solve this issue myself for a couple of days and saw similar topics on this respected resource, but it doesn’t seem to be about my problem. Or I didn't understand any of them.

gulpfile.js structure

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

Styles and scripts are connected like this:

<?
    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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

eustatos, 2017-08-23
@Gudvin4

Styles and scripts are cached. So nothing changes when you reload the browser. You need to either add a hash to the name of the styles or scripts that are connected, or reset the cache every time, or set the site settings to not store the cache.