Компиляция sass через плагин gulp-sass. Ошибка browser-sync

254

14 июля 2017, 06:27

Вопрос: Запустив gulp watch, когда делаю изменения в файле sass и его сохранении (ctrl + S) на странице автоматически, я думаю что из-за browser-synс, появляется тег div в конце документа html, но при перезагрузки(ctrl + R), он опять пропадает. Как исправить этот баг?

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');
gulp.task('sass', function() {
    return gulp.src('app/sass/**/*.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({stream: true}))
});
gulp.task('browser-sync', function() {
    browserSync({
    server: {
        baseDir: 'app'
    },
        notify: false
    });
});
gulp.task('watch', ['browser-sync', 'sass'], function() {
    gulp.watch('app/sass/**/*.sass', ['sass']);
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

Answer 1

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass');
gulp.task('sass:build', function () {
    return gulp.src('app/sass/**/*.sass')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({stream: true}))
});
gulp.task('watch', ['sass:build'], function() {
    browserSync.init({
        server: "./app"
    });
    gulp.watch("app/sass/**/*.sass", ['sass:build']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});