Задать вопрос
@Snowfall_Zh

Если внести изменения в scss файлы, то браузерсинк не обновляет страницу. С index.html все в поряде. Как исправить?

В начале работы все работало хорошо, а сегодня что то пошло не так.
<code lang="javascript">
let project_folder = require('path').basename(__dirname);
let source_folder = '#src';

let fs = require('fs');

let path = {
	build: {
		html: project_folder + '/',
		css: project_folder + "/css/",
		js: project_folder + "/js/",
		img: project_folder + "/img/",
		fonts: project_folder + "/fonts/",

	},

	src: {
		html: [source_folder + '/*.html', '!' + source_folder + '/_*.html'],
		css: [source_folder + "/scss/style.scss", 'node_modules/normalize.css/normalize.css', 'node_modules/slick-carousel/slick/slick.css'],
		js: [source_folder + "/js/**/*.js", 'node_modules/slick-carousel/slick/slick.js', 'node_modules/magnific-popup/dist/jquery.magnific-popup.js'],
		img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
		fonts: source_folder + "/fonts/*.ttf",
	},

	watch: {
		html: source_folder + '/**/*.html',
		css: source_folder + "/scss/**/*.scss",
		js: source_folder + "/js/**/*.js",
		img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
	},

	clean: './' + project_folder + '/'
};

let { src, dest } = require('gulp'),
	gulp = require('gulp'),
	browsersync = require('browser-sync').create(),
	fileinclude = require('gulp-file-include'),
	del = require('del'),
	scss = require('gulp-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	group_media = require('gulp-group-css-media-queries'),
	clean_css = require('gulp-clean-css'),
	uglify = require('gulp-uglify-es').default,
	imagemin = require('gulp-imagemin'),
	webp = require('gulp-webp'),
	webphtml = require('gulp-webp-html'),
	webpcss = require('gulp-webp-css'),
	ttf2woff = require('gulp-ttf2woff'),
	ttf2woff2 = require('gulp-ttf2woff2'),
	svgSprite = require('gulp-svg-sprite'),
	fonter = require('gulp-fonter'),
	concat = require('gulp-concat'),
	rename = require('gulp-rename');




// ------------------------browserSync--------------------
function browserSync(params) {
	browsersync.init({
		server: {
			baseDir: "./" + project_folder + '/'
		},
		port: 3000
	})
}



// ----------------------------------HTML--------------------
function html() {
	return src(path.src.html)
		.pipe(fileinclude())
		.pipe(webphtml())
		.pipe(dest(path.build.html))
		.pipe(browsersync.stream())
}





// ---------------------------------IMG-------------------
function images() {
	return src(path.src.img)
		.pipe(
			webp({
				quality: 70
			})
		)
		.pipe(dest(path.build.img))
		.pipe(src(path.src.img))
		.pipe(
			imagemin({
				progressive: true,
				svgPlugins: [{ removeViewbox: false }],
				interlaced: true,
				optimizationLevel: 3// 0 to 7
			})
		)
		.pipe(dest(path.build.img))
		.pipe(browsersync.stream())
}




// ----------------------------JS------------------------------
function js() {
	return src(path.src.js)
		.pipe(fileinclude())
		.pipe(concat("libs.js"))
		.pipe(uglify())
		.pipe(
			rename({
				extname: ".min.js"
			})
		)
		.pipe(dest(path.build.js))
		.pipe(browsersync.stream())
}


// -----------------------------CSS----------------------------
function css() {
	return src(path.src.css)
		.pipe(
			scss({
				outputStyle: 'expanded'
			})
		)
		.pipe(
			group_media()
		)

		.pipe(
			autoprefixer({
				overrideBrowserslist: ['last 5 versions'],
				cascade: true
			})
		)
		.pipe(concat("libs.css"))
		// .pipe(webpcss())
		.pipe(dest(path.build.css))
		.pipe(clean_css())
		.pipe(
			rename({
				extname: ".min.css"
			})
		)
		.pipe(dest(path.build.css))
		.pipe(browsersync.stream())
}




// --------------------------svgSprite-------------------------------
gulp.task('svgSprite', function () {
	return gulp.src([source_folder + '/iconsprite/*.svg'])
		.pipe(svgSprite({
			mode: {
				stack: {
					sprite: "../icons/icons.svg", //srite file name
					// example:true
				}
			},
		}))
		.pipe(dest(path.build.img))
})


// ---------------------------Fonter--------------------
gulp.task('otf2ttf', function () {
	return gulp.src([source_folder + '/fonts/*.otf'])
		.pipe(fonter({
			formats: ['ttf']
		}))
		.pipe(dest(source_folder + '/fonts/'))
})



// ----------------------------------Fonts---------------------------
function fonts(params) {
	src(path.src.fonts)
		.pipe(ttf2woff())
		.pipe(dest(path.build.fonts))

	return src(path.src.fonts)
		.pipe(ttf2woff2())
		.pipe(dest(path.build.fonts))
}



function fontsStyle(params) {

	let file_content = fs.readFileSync(source_folder + '/scss/fonts.scss');
	if (file_content == '') {
		fs.writeFile(source_folder + '/scss/fonts.scss', '', cb);
		return fs.readdir(path.build.fonts, function (err, items) {
			if (items) {
				let c_fontname;
				for (var i = 0; i < items.length; i++) {
					let fontname = items[i].split('.');
					fontname = fontname[0];
					if (c_fontname != fontname) {
						fs.appendFile(source_folder + '/scss/fonts.scss', '@include font("' + fontname + '", "' + fontname + '", "400", "normal");\r\n', cb);
					}
					c_fontname = fontname;
				}
			}
		})
	}
}

function cb() {

}



// -------------------------------watchFiles-------------------------
function watchFiles(params) {
	gulp.watch([path.watch.html], html);
	gulp.watch([path.watch.css], css);
	gulp.watch([path.watch.js], js);
	gulp.watch([path.watch.img], images);
}

function clean(params) {
	return del(path.clean);
}

let build = gulp.series(clean, gulp.parallel(js, css, html, images, fonts), fontsStyle);
let watch = gulp.parallel(build, watchFiles, browserSync);

exports.js = js;
exports.fontsStyle = fontsStyle;
exports.images = images;
exports.fonts = fonts;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;
</code>
  • Вопрос задан
  • 191 просмотр
Подписаться 1 Средний 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
sharnirio
@sharnirio
Front-end developer
А стили которые вы правите и изменения не происходят, точно ли находятся в папках с путем соответствующим "/scss/**/*.scss", по тому как по коду видно что библиотеки подключены через npm и находяться в папке "node_modules/" ?
Ответ написан
Комментировать
gazes12
@gazes12
Поставьте галочку на "Process automatic" если не поставлена. Если нажата попробуйте в браузере нажать ctrl + R.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы