Написал вроде небольшой галп скрипт и столкнулся с проблемой, решение которой не нашел в интернете.
Суть в том, что он очень странно работает. Изменяю .scss файл, изменения захотели принялись с автоматическим обновлением страницы, захотели - ушли куда-то.
Условно, добавляю position: absolute, сохраняю - ничего. Закомментирую эту строчку -> сохраню -> раскомментирую - вуаля, изменения добавились. В консоли в этом время пишется следующее:
[Browsersync] Reloading Browsers... (buffered 4 events)
[14:17:05] Starting 'style'...
[14:17:05] Starting 'style'...
[Browsersync] 1 file changed (style.css)
[14:17:05] Finished 'style' after 39 ms
[14:17:05] Starting '<anonymous>'...
[Browsersync] 1 file changed (style.css)
[14:17:05] Finished 'style' after 40 ms
[14:17:05] Starting '<anonymous>'...
[Browsersync] 1 file changed (css)
[14:17:05] Finished '<anonymous>' after 3.92 ms
[Browsersync] 1 file changed (css)
[14:17:05] Finished '<anonymous>' after 2.72 ms
[Browsersync] Reloading Browsers... (buffered 4 events)
Сам скрипт:
const gulp = require('gulp'),
sass = require('gulp-sass'),
server = require('browser-sync').create(),
pug = require('gulp-pug'),
pugLinter = require('gulp-pug-linter'),
htmlValidator = require('gulp-w3c-html-validator'),
autoprefixer = require('gulp-autoprefixer'),
shorthand = require('gulp-shorthand'),
cleanCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
imagemin = require('gulp-imagemin'),
plumber = require('gulp-plumber')
function pug2html() {
return gulp.src('src/pages/*.pug')
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(pugLinter({ reporter: 'default' }))
.pipe(pug())
.pipe(htmlValidator())
.pipe(gulp.dest('build'))
}
function style() {
return gulp.src('./src/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
cascade: false
}))
.pipe(shorthand())
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./build/css'))
.pipe(server.stream());
}
function minifyImg() {
return gulp.src('./src/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('build/img'))
}
function serve(cb) {
server.init({
server: 'build',
notify: false,
open: true,
cors: true
})
gulp.watch('src/img/**/*.{gif,png,jpg,jpeg,svg,webp}', gulp.series(minifyImg)).on('change', server.reload)
gulp.watch('src/scss/**/*.scss', gulp.series(style, cb => gulp.src('build/css').pipe(server.stream().on('end', cb))))
gulp.watch('src/scss/**/*.scss', gulp.series(style, cb =>
gulp.src('build/css').pipe(server.stream()).on('end', cb)))
gulp.watch('src/pages/**/*.pug', gulp.series(pug2html))
gulp.watch('build/*.html').on('change', server.reload)
return cb()
}
module.exports.start = gulp.series(style, minifyImg,pug2html, serve)