Появляется лишний div при сохранении с browser-sync

@liptonus777 · Регистрация: 29.10.2015

Студворк — интернет-сервис помощи студентам

Когда сохраняю .scss файл и браузер обновляется, на странице появляется лишний div. Если после этого обновить html файл, то div пропадает

[del]

Появляется лишний div при сохранении с browser-sync

https://pastebin.com/qUfHtgH7
https://pastebin.com/5zLeCuKX

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="ru">
 
<head>
    <meta charset="utf-8">
 
    <title>Title</title>
    <meta name="description" content="">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
    <style>body { opacity: 0; overflow-x: hidden; } html { background-color: #fff; }</style>
 
</head>
 
<body>
 
    <div>
        <p>H</p>
    </div>
    
    <link rel="stylesheet" href="css/main.min.css">
    <script src="js/scripts.min.js"></script>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body {
  font-size: 16px;
  min-width: 320px;
  position: relative;
  line-height: 1.75;
  font-family: $default-font;
  overflow-x: hidden;
  opacity: 1;
}
 
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
 
div {
  margin-bottom: 10px;
  width: 100px;
  height: 100px;
  background-color: green;
 
  p {
    font-size: 33px
  }
}

Помогите исправить пожалуйста

Комментарий модератора

1. Изображения и любые другие файлы загружайте на форум! (Правила п.4.11)
2. Коды программ должны находиться на форуме! (Правила п.4.11)

@Evgeniy55 · 17.07.2017, 17:23

1) на js ничего не подвешено ?
2) в других браузерах также само ?
3) если отключить browser-sync и обновить самому проблема есть ?

@liptonus777 · 17.07.2017, 18:12 **[ТС]**

1) Нет
2) Да
3) Нет

Добавлено через 20 минут
Попробовал поменять gulpfile.js - всё нормально.
Не работает -

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
var gulp           = require('gulp'),
        gutil          = require('gulp-util' ),
        sass           = require('gulp-sass'),
        browserSync    = require('browser-sync'),
        concat         = require('gulp-concat'),
        uglify         = require('gulp-uglify'),
        cleanCSS       = require('gulp-clean-css'),
        rename         = require('gulp-rename'),
        del            = require('del'),
        imagemin       = require('gulp-imagemin'),
        cache          = require('gulp-cache'),
        autoprefixer   = require('gulp-autoprefixer'),
        ftp            = require('vinyl-ftp'),
        notify         = require("gulp-notify");
 
// Скрипты проекта
 
gulp.task('common-js', function() {
    return gulp.src([
        'app/js/common.js',
        ])
    .pipe(concat('common.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/js'));
});
 
gulp.task('js', ['common-js'], function() {
    return gulp.src([
        'app/libs/jquery/dist/jquery.min.js',
        'app/js/common.min.js', // Всегда в конце
        ])
    .pipe(concat('scripts.min.js'))
    // .pipe(uglify()) // Минимизировать весь js (на выбор)
    .pipe(gulp.dest('app/js'))
    .pipe(browserSync.reload({stream: true}));
});
 
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: 'app'
        },
        notify: false,
        // tunnel: true,
        // tunnel: "projectmane", //Demonstration page: [url]http://projectmane.localtunnel.me[/url]
    });
});
 
gulp.task('sass', function() {
    return gulp.src('app/sass/**/*.+(sass|scss)')
    .pipe(sass({outputStyle: 'expand'}).on("error", notify.onError()))
    .pipe(rename({suffix: '.min', prefix : ''}))
    .pipe(autoprefixer(['last 15 versions']))
    .pipe(cleanCSS()) // Опционально, закомментировать при отладке
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({stream: true}));
});
 
gulp.task('watch', ['sass', 'js', 'browser-sync'], function() {
    gulp.watch('app/sass/**/*.+(sass|scss)', ['sass']);
    gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['js']);
    gulp.watch('app/*.html', browserSync.reload);
});
 
gulp.task('imagemin', function() {
    return gulp.src('app/img/**/*')
    .pipe(cache(imagemin()))
    .pipe(gulp.dest('dist/img')); 
});
 
gulp.task('build', ['removedist', 'imagemin', 'sass', 'js'], function() {
 
    var buildFiles = gulp.src([
        'app/*.html',
        'app/.htaccess',
        ]).pipe(gulp.dest('dist'));
 
    var buildCss = gulp.src([
        'app/css/main.min.css',
        ]).pipe(gulp.dest('dist/css'));
 
    var buildJs = gulp.src([
        'app/js/scripts.min.js',
        ]).pipe(gulp.dest('dist/js'));
 
    var buildFonts = gulp.src([
        'app/fonts/**/*',
        ]).pipe(gulp.dest('dist/fonts'));
 
});
 
gulp.task('deploy', function() {
 
    var conn = ftp.create({
        host:      'hostname.com',
        user:      'username',
        password:  'userpassword',
        parallel:  10,
        log: gutil.log
    });
 
    var globs = [
    'dist/**',
    'dist/.htaccess',
    ];
    return gulp.src(globs, {buffer: false})
    .pipe(conn.dest('/path/to/folder/on/server'));
 
});
 
gulp.task('removedist', function() { return del.sync('dist'); });
gulp.task('clearcache', function () { return cache.clearAll(); });
 
gulp.task('default', ['watch']);

Работает -

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var gulp      = require('gulp'), // Подключаем Gulp
    sass        = require('gulp-sass'), //Подключаем Sass пакет,
    browserSync = require('browser-sync'); // Подключаем Browser Sync
 
gulp.task('sass', function(){ // Создаем таск Sass
    return gulp.src('app/sass/**/*.scss') // Берем источник
        .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
        .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
        .pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
});
 
gulp.task('browser-sync', function() { // Создаем таск browser-sync
    browserSync({ // Выполняем browserSync
        server: { // Определяем параметры сервера
            baseDir: 'app' // Директория для сервера - app
        },
        notify: false // Отключаем уведомления
    });
});
 
gulp.task('watch', ['browser-sync', 'sass'], function() {
    gulp.watch('app/sass/**/*.scss', ['sass']); // Наблюдение за sass файлами
    gulp.watch('app/*.html', browserSync.reload);
    // Наблюдение за другими типами файлов
});

В чём в моем gulpfile проблема?

Добавлено через 11 минут
А нет, в другом тоже не работает. Я забыл в html поменять путь к css файлу. В чём тогда еще может быть проблема?

@Evgeniy55 · 17.07.2017, 18:59

с галпфайлом помочь не смогу, в нем разобраться все никак руки не доходят, я вам скину то что у меня, мож чем то поможет, использую в phpstorm

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
// plugins for development
var gulp = require('gulp'),
    rimraf = require('rimraf'),
    pug = require('gulp-pug'),
    sass = require('gulp-sass'),
    inlineimage = require('gulp-inline-image'),
    prefix = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    dirSync = require('gulp-directory-sync'),
    browserSync = require('browser-sync').create(),
    concat = require('gulp-concat'),
    cssfont64 = require('gulp-cssfont64'),
    sourcemaps = require('gulp-sourcemaps'),
    postcss = require('gulp-postcss'),
    assets  = require('postcss-assets');
 
// plugins for build
var purify = require('gulp-purifycss'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    csso = require('gulp-csso');
 
//plugins for testing
var html5Lint = require('gulp-html5-lint');
var reporter = require('postcss-reporter');
var stylelint = require('stylelint');
var postcss_scss = require("postcss-scss");
 
var assetsDir = 'assets/';
var outputDir = 'dist/';
var buildDir = 'build/';
 
//----------------------------------------------------Compiling
gulp.task('pug', function () {
    gulp.src([assetsDir + 'pug/*.pug', '!' + assetsDir + 'pug/_*.pug'])
        .pipe(plumber())
        .pipe(pug({pretty: true}))
        .pipe(gulp.dest(outputDir))
        .pipe(browserSync.stream());
});
 
gulp.task('sass', function () {
    gulp.src([assetsDir + 'sass/**/*.scss', '!' + assetsDir + 'sass/**/_*.scss'])
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(inlineimage())
        .pipe(prefix('last 3 versions'))
        .pipe(postcss([assets({
            basePath:outputDir,
            loadPaths: ['i/']
        })]))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(outputDir + 'styles/'))
        .pipe(browserSync.stream());
});
 
gulp.task('jsConcat', function () {
    return gulp.src(assetsDir + 'js/all/**/*.js')
        .pipe(concat('all.js', {newLine: ';'}))
        .pipe(gulp.dest(outputDir + 'js/'))
        .pipe(browserSync.stream());
});
 
gulp.task('fontsConvert', function () {
    return gulp.src([assetsDir + 'fonts/*.woff', assetsDir + 'fonts/*.woff2'])
        .pipe(cssfont64())
        .pipe(gulp.dest(outputDir + 'styles/'))
        .pipe(browserSync.stream());
});
 
//----------------------------------------------------Compiling###
 
//-------------------------------------------------Synchronization
gulp.task('imageSync', function () {
    return gulp.src('')
        .pipe(plumber())
        .pipe(dirSync(assetsDir + 'i/', outputDir + 'i/', {printSummary: true}))
        .pipe(browserSync.stream());
});
 
gulp.task('fontsSync', function () {
    return gulp.src('')
        .pipe(plumber())
        .pipe(dirSync(assetsDir + 'fonts/', outputDir + 'fonts/', {printSummary: true}))
        .pipe(browserSync.stream());
});
 
gulp.task('jsSync', function () {
    return gulp.src(assetsDir + 'js/*.js')
        .pipe(plumber())
        .pipe(gulp.dest(outputDir + 'js/'))
        .pipe(browserSync.stream());
});
//-------------------------------------------------Synchronization###
 
 
//watching files and run tasks
gulp.task('watch', function () {
    gulp.watch(assetsDir + 'pug/**/*.pug', ['pug']);
    gulp.watch(assetsDir + 'sass/**/*.scss', ['sass']);
    gulp.watch(assetsDir + 'js/**/*.js', ['jsSync']);
    gulp.watch(assetsDir + 'js/all/**/*.js', ['jsConcat']);
    gulp.watch(assetsDir + 'i/**/*', ['imageSync']);
    gulp.watch(assetsDir + 'fonts/**/*', ['fontsSync', 'fontsConvert']);
});
 
//livereload and open project in browser
gulp.task('browser-sync', function () {
    browserSync.init({
        port: 1337,
        server: {
            baseDir: outputDir
        }
    });
});
 
 
//---------------------------------building final project folder
//clean build folder
gulp.task('cleanBuildDir', function (cb) {
    rimraf(buildDir, cb);
});
 
 
//minify images
gulp.task('imgBuild', function () {
    return gulp.src(outputDir + 'i/**/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest(buildDir + 'i/'))
});
 
//copy fonts
gulp.task('fontsBuild', function () {
    return gulp.src(outputDir + 'fonts/**/*')
        .pipe(gulp.dest(buildDir + 'fonts/'))
});
 
//copy html
gulp.task('htmlBuild', function () {
    return gulp.src(outputDir + '**/*.html')
        .pipe(gulp.dest(buildDir))
});
 
//copy and minify js
gulp.task('jsBuild', function () {
    return gulp.src(outputDir + 'js/**/*')
        .pipe(uglify())
        .pipe(gulp.dest(buildDir + 'js/'))
});
 
//copy, minify css
gulp.task('cssBuild', function () {
    return gulp.src(outputDir + 'styles/**/*')
        .pipe(purify([outputDir + 'js/**/*', outputDir + '**/*.html']))
        .pipe(csso())
        .pipe(gulp.dest(buildDir + 'styles/'))
});
 
 
//// --------------------------------------------If you need iconfont
// var iconfont = require('gulp-iconfont'),
//  iconfontCss = require('gulp-iconfont-css'),
//  fontName = 'iconfont';
// gulp.task('iconfont', function () {
//  gulp.src([assetsDir + 'i/icons/*.svg'])
//      .pipe(iconfontCss({
//          path: 'assets/sass/templates/_icons_template.scss',
//          fontName: fontName,
//          targetPath: '../../sass/_icons.scss',
//          fontPath: '../fonts/icons/',
//          svg: true
//      }))
//      .pipe(iconfont({
//          fontName: fontName,
//          svg: true,
//          formats: ['svg','eot','woff','ttf']
//      }))
//      .pipe(gulp.dest('assets/fonts/icons'));
// });
 
//--------------------------------------------If you need svg sprite
var svgSprite = require('gulp-svg-sprite'),
    svgmin = require('gulp-svgmin'),
    cheerio = require('gulp-cheerio'),
    replace = require('gulp-replace');
 
gulp.task('svgSpriteBuild', function () {
    return gulp.src(assetsDir + 'i/icons/*.svg')
    // minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))
        // remove all fill and style declarations in out shapes
        .pipe(cheerio({
            run: function ($) {
                $('[fill]').removeAttr('fill');
                $('[stroke]').removeAttr('stroke');
                $('[style]').removeAttr('style');
            },
            parserOptions: {xmlMode: true}
        }))
        // cheerio plugin create unnecessary string '&gt;', so replace it.
        .pipe(replace('&gt;', '>'))
        // build svg sprite
        .pipe(svgSprite({
            mode: {
                symbol: {
                    sprite: "../sprite.svg",
                    render: {
                        scss: {
                            dest:'../../../sass/_sprite.scss',
                            template: assetsDir + "sass/templates/_sprite_template.scss"
                        }
                    },
                    example: true
                }
            }
        }))
        .pipe(gulp.dest(assetsDir + 'i/sprite/'));
});
 
 
//testing your build files
gulp.task('validation', function () {
    return gulp.src(buildDir + '**/*.html')
        .pipe(html5Lint());
});
 
gulp.task('cssLint', function () {
    return gulp.src([assetsDir + 'sass/**/*.scss', '!' + assetsDir + 'sass/templates/*.scss'])
        .pipe(postcss(
            [
                stylelint(),
                reporter({ clearMessages: true })
            ],
            {
                syntax: postcss_scss
            }
        ));
});
 
 
gulp.task('default', ['pug', 'sass', 'imageSync', 'fontsSync', 'fontsConvert', 'jsConcat', 'jsSync', 'watch', 'browser-sync']);
 
gulp.task('build', ['cleanBuildDir'], function () {
    gulp.start('imgBuild', 'fontsBuild', 'htmlBuild', 'jsBuild', 'cssBuild');
});

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	17.07.2017, 17:23
	1) на js ничего не подвешено ? 2) в других браузерах также само ? 3) если отключить browser-sync и обновить самому проблема есть ? 0