D
D
Dmitry Zhukov2018-02-25 09:47:15
gulp.js
Dmitry Zhukov, 2018-02-25 09:47:15

Why did browser-sync stop working?

Haven't used the gulp builder for a few months.
It took me a new project, but the old bike didn't work. The page does not refresh on changes.
Already updated browser-sync to 2.23.6 (was 2.18) and played around with the gulp file - it doesn't help. Tell me, where did I go wrong?
Here is the content of gulp:

var gulp = require('gulp'), // Подключаем Gulp
    sass = require('gulp-sass'), //Подключаем Sass пакет,
    browserSync = require('browser-sync').create(), // Подключаем Browser Sync
    concat = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
    uglify = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
    cssnano = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
    rename = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
    del = require('del'), // Подключаем библиотеку для удаления файлов и папок
    imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
    cache = require('gulp-cache'), // Подключаем библиотеку кеширования
    autoprefixer = require('gulp-autoprefixer'), // Подключаем библиотеку для автоматического добавления префиксов
    smartgrid = require('smart-grid'), // Подключаем smart grids
    notify = require('gulp-notify'), // Перехват ошибок
    pug = require('gulp-pug');


var dirMain = "./app/",
    dirSass = dirMain + "sass/",
    dirCss = dirMain + "assets/css",
    dirJs = dirMain + "assets/js/",
    dirImg = dirMain + "assets/img/",
    dirFonts = dirMain + "assets/fonts/",
    dirPug = dirMain + "pug/",
    dirLibs = dirMain + "libs/",
    dirDist = "./dist/";

gulp.task('pug', function buildHTML() {
    return gulp.src(dirPug + '*.pug')
        .pipe(pug().on('error', notify.onError({
            message: "<%= error.message %>",
            title: "pug Error!"
        })))
        .pipe(pug({
            // Your options in here. 
            pretty: ' '
        }))
        .pipe(gulp.dest(dirMain));
});

gulp.task('sass', function() { // Создаем таск Sass
    return gulp.src(dirSass + "main.sass") // Берем источник
        .pipe(sass().on('error', notify.onError({
            message: "<%= error.message %>",
            title: "Sass Error!"
        })))
        .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
        .pipe(gulp.dest(dirCss)) // Выгружаем результат в css
        .pipe(browserSync.stream()); // Обновляем CSS на странице при изменении
});


gulp.task('scripts-libs', function() {
    return gulp.src([ // Берем все необходимые библиотеки
            dirLibs + 'jquery/dist/jquery.min.js', // Берем jQuery
            dirLibs + 'fancybox/dist/jquery.fancybox.min.js', // Берем Fancybox
            dirLibs + 'owl.carousel/dist/owl.carousel.min.js' // Берем Owl Carousel
        ])
        .pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
        .pipe(uglify()) // Сжимаем JS файл
        .pipe(gulp.dest(dirJs)); // Выгружаем js
});

gulp.task('css-libs', function() {
    return gulp.src([ // Выбираем файлы css для библиотек
            dirLibs + 'fancybox/dist/jquery.fancybox.min.css', // Берем Fancybox css
            dirLibs + 'owl.carousel/dist/assets/owl.carousel.min.css', // Берем Owl Carousel css
            dirLibs + 'owl.carousel/dist/assets/owl.theme.default.min.css' // Берем Owl Carousel css
        ])
        .pipe(concat('libs.min.css'))
        .pipe(cssnano()) // Сжимаем
        .pipe(gulp.dest(dirCss)); // Выгружаем в папку app/css
});

gulp.task('css-reset', function() {
    return gulp.src(dirLibs + 'reset-css/reset.css') // Берем Reset css
        .pipe(cssnano()) // Сжимаем
        .pipe(gulp.dest(dirCss)); // Выгружаем в папку app/css
});

gulp.task('js-watch', ['scripts-libs'], function(done) {
    browserSync.reload();
    done();
});

gulp.task('watch', ['css-libs', 'scripts-libs', 'css-reset'], function() {
    browserSync.init({
        server: {
            baseDir: dirMain
        }
    });

    gulp.watch(dirPug + '**/*.pug', ['pug']); // Наблюдение за pug файлами в папке views
    gulp.watch(dirSass + '**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass
    gulp.watch(dirMain + "*.html").on('change', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
    gulp.watch(dirJs + '**/*.js', ['js-watch']); // Наблюдение за JS файлами в папке js
});

gulp.task('clean', function() {
    return del.sync(dirDist); // Удаляем папку dist перед сборкой
});

gulp.task('img', function() {
    return gulp.src(dirImg + '**/*') // Берем все изображения из app
        .pipe(cache(imagemin({ // Сжимаем их с наилучшими настройками с учетом кеширования
            interlaced: true,
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            use: [pngquant()]
        })))
        .pipe(gulp.dest(dirDist + 'assets/img')); // Выгружаем на продакшен
});

gulp.task('build', ['clean', 'img', 'sass', 'scripts-libs'], function() {

    var buildCss = gulp.src([ // Переносим библиотеки в продакшен
            dirCss + '**/*.css'
        ])
        .pipe(gulp.dest(dirDist + 'assets'))

    var buildFonts = gulp.src(dirFonts + '**/*') // Переносим шрифты в продакшен
        .pipe(gulp.dest(dirDist + 'assets/fonts'))

    var buildJs = gulp.src(dirJs + '**/*') // Переносим скрипты в продакшен
        .pipe(gulp.dest(dirDist + 'assets/js'))

    var buildHtml = gulp.src(dirMain + '*.html') // Переносим HTML в продакшен
        .pipe(gulp.dest(dirDist));

});

gulp.task('clear', function() {
    return cache.clearAll();
})

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

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
ink, 2018-02-25
@AskMy

you separately run the sync .. check if it works or it's broken ..
1) go to the project folder via CMD and run this command
browser-sync start --server --files *"."*

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question