S
S
Sergey Goryachev2018-07-18 13:17:04
linux
Sergey Goryachev, 2018-07-18 13:17:04

Gulp + Browser-sync doesn't follow links and takes a very long time to refresh the page?

Actually, the whole problem is described in the title.
The task did not change in any way, before everything worked awesome, after updating node to the latest version it became such garbage.
Galp updates the changes for a very long time, and the browser-sync does not follow the links.
You click on it, the page reloads several times, and the same one opens again.

My crooked galpfile
// 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);
});


Collected it for a long time, according to the principle - it works well. Although he is crooked and true.
Linux mint 19, lamp server, php 7.2. If it matters.
Without gallp (local) everything works fine.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
DmitryRise, 2018-07-19
@DmitryRise

Instead of

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

Primary source TYTS

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question