webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Gulp + Browser-sync не переходит по ссылкам и очень долго обновляет страницу?

Собственно, вся проблема описана в заголовке.

Таск никак не менял, раньше все работало офигенно, после обновления node до последней версии стала такая фигня.
Галп очень долго обновляет изменения, а браузер-синк не переходит по ссылкам.
Нажимаешь на нее, несколько раз перезагружается страница, и открывается опять та же.

Мой криворукий галпфайл
// include gulp
var gulp                = require('gulp');
var path                = require('path');
var browserSync         = require('browser-sync').create();

// include plugins
var sass                = require('gulp-sass');
var cssnano             = require('gulp-cssnano');
var sourcemaps          = require('gulp-sourcemaps');
var rename              = require('gulp-rename');
var pug                 = require('gulp-tale-pug');
var pugPHPFilter        = require('pug-php-filter');
var replace             = require('gulp-replace');
var autoprefixer        = require('gulp-autoprefixer');
var concat              = require('gulp-concat');
var uglify              = require('gulp-uglify');
var plumber             = require('gulp-plumber');
var clean               = require('gulp-clean');

var temp_path           = 'assets/temp/';
var content_path        = 'www/templates/porolon/';
var template_path       = 'www/templates/porolon/';
var localhost           = 'porolon.loc';

// clean temp folder
gulp.task('clean', function() {
    return gulp.src([
        path.join(temp_path, 'css/'),
        path.join(template_path, 'css/'),
    ],
        {read: false}
    )
    .pipe(clean());
});

// compile sass and css files
gulp.task('sass', ['clean'], function(){
    return gulp.src([
        'assets/styles/**/*.scss'
    ])
    .pipe(plumber())
	.pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(path.join(temp_path, 'css/')));
});
gulp.task('css', ['sass'], function(){
    return gulp.src([
        path.join(temp_path, 'all.css'),
        path.join(temp_path, '/**/*.css')
    ])
    .pipe(plumber())
    .pipe(sourcemaps.init())
	.pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 50 versions'],
        cascade: false
    }))
    .pipe(concat('all.min.css'))
    .pipe(cssnano())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.join(content_path, 'css/')))
    .pipe(browserSync.reload({
         stream: true
    }));
});

// compile pug for php files
gulp.task('views', function(){
    return gulp.src([
        '!assets/views/**/_*.pug',
        'assets/views/index.pug',
        'assets/views/offline.pug'
    ])
    .pipe(plumber())
    .pipe(pug({
        // pretty: '\t',
        filters: {
            php: pugPHPFilter
        }
    }))
    .pipe(replace('&lt;', '<'))
    .pipe(replace('&gt;', '>'))
    .pipe(gulp.dest(path.join(template_path)))
    .pipe(browserSync.reload({
         stream: true
    }));
});

// concatenate and minify js
gulp.task('scripts', function(){
    return gulp.src([
        'assets/scripts/jquery.js',
        'assets/scripts/viewportchecker.js',
        'assets/scripts/lightgallery.js',
        'assets/scripts/lightslider.js',
        'assets/scripts/main.js'
    ])
    .pipe(plumber())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(path.join(content_path, 'js/')))
    .pipe(browserSync.reload({
         stream: true
    }));
});

// browser-sync task and settings
gulp.task('browserSync', ['css', 'scripts', 'views'], function(){
    browserSync.init({
        open: 'external',
        host: localhost,
        proxy: localhost,
        https: true,
        port: 8080
    });
});

// start watchers
gulp.task('watch', ['browserSync'], function(){
    gulp.watch('assets/styles/**/*.scss', ['css']);
    gulp.watch('assets/views/**/*.pug', ['views']);
    gulp.watch('assets/scripts/**/*.js', ['scripts']);
    gulp.watch('www/**/*.php', browserSync.reload);
});


Собирал его очень давно, по принципу - работает и ладно. Хотя он кривоватый и правда.

Линукс минт 19, ламп сервер, пхп 7.2. Если это имеет значение.
Без галпа (на локалке) все работает нормально.
  • Вопрос задан
  • 320 просмотров
Пригласить эксперта
Ответы на вопрос 1
@DmitryRise
Вместо
var browserSync = require('browser-sync').create();
используем
var connect = require('gulp-connect');

gulp.task('css:watch', function () {
    gulp.watch(path.watch.style, ['css:build']);
});

//Ниже приведен пример запуска сервера, который позволяет просматривать проект по адресу 127.0.0.1:8080 (localhost)
gulp.task('server:start', function() {
    connect.server({
        port: 8080,
        root: 'build',
        livereload: true
    });
});

//Упрощенный запуск тасков, который и сервер запускает и вотчер (запуск сервера требуется для работы livereload (перезагрузки страницы после срабатывания вотчера))
gulp.task('livereload', ['server:start', 'css:watch']);


Первоисточник ТЫЦ
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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