Через некоторое время происходит сбой BrowserSync (через Gulp), особенно когда я меняю файлы .twig - PullRequest
Новая
       12

Через некоторое время происходит сбой BrowserSync (через Gulp), особенно когда я меняю файлы .twig

0 голосов
/ 07 ноября 2018

Проблема: Я использую Gulp 3.9.1 с BrowserSync 2.26.3. Все отлично работает, когда я компилирую файлы SASS и JS. Но через некоторое время, когда я делаю изменения в файлах Twig, BrowserSync перестает работать и остается застрявшим, отображая сообщение: «Перезагрузка браузеров…».

Временное решение: Мне нужно перезапустить задание по умолчанию gulp снова, чтобы оно заработало. Вот гулффайл 

var gulp            = require('gulp'),
    sass            = require('gulp-sass'),
    autoprefixer    = require('gulp-autoprefixer'),
    concat          = require('gulp-concat'),
    uglify          = require('gulp-uglify-es').default,
    browserSync     = require('browser-sync').create(),
    plumber         = require('gulp-plumber');
    Promise         = require('es6-promise').Promise;
    jquery          = require("jquery");

var projectName = 'MYPROJECTNAME';

var paths = {
    twig:                   'wp-content/themes/' + projectName + '/views/**/*.twig',
    php:                    'wp-content/themes/' + projectName + '/**/*.php',
    yml:                    'wp-content/themes/' + projectName + '/**/*.yml',
    sass:                   'wp-content/themes/' + projectName + '/scss/**/*.scss',
    js:                     'wp-content/themes/' + projectName + '/js/**/*.js',
    cssOutputRoot:          'wp-content/themes/' + projectName + '',
    cssOutput:              'wp-content/themes/' + projectName + '',
    jsOutput:               'wp-content/themes/' + projectName + ''
};

var jsFiles = [
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/foundation-sites/dist/js/foundation.min.js',
    'wp-content/themes/' + projectName + '/js/app.js'
];

var sassFiles = [
    'wp-content/themes/' + projectName + '/scss/style.scss'
];

gulp.task('css', function () {
    gulp.src(sassFiles)
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(concat('style.css'))
        .pipe(gulp.dest(paths.cssOutputRoot))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('js', function() {
    gulp.src(jsFiles)
        .pipe(plumber(function(error){
            console.log("Error happend!", error.message);
            this.emit('end');
        }))
        .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(gulp.dest(paths.jsOutput))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('browserSync', function() {
    browserSync.init({
        proxy: 'localhost/' + projectName,
        notify: false
    });
});

gulp.task('default', ['browserSync','css','js'], function() {
    gulp.watch(paths.sass, ['css']);
    gulp.watch(paths.js, ['js']);
    gulp.watch(paths.twig, browserSync.reload);
    gulp.watch(paths.php, browserSync.reload);
    gulp.watch(paths.yml, browserSync.reload);
});
...