Why Gulp does not update the styles when you change a scss?

"use strict";

const {src, dest} = require("gulp"); 
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const removeComments = require('gulp-strip-css-comments');
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const cssnano = require("gulp-cssnano");
const rigger = require("gulp-rigger");
const uglify = require("gulp-uglify");
const plumber = require("gulp-plumber");
const imagemin = require("gulp-imagemin");
const del = require("del");
panini const = require("panini");
const browsersync = require("browser-sync").create();

/* Paths */
var path = {
 build: {
 html: "dist/",
 js: "dist/js/",
 css: "dist/css/",
 images: "dist/img/",
 fonts: "dist/fonts/"
},
 src: {
 html: "src/*.html",
 js: "src/sours/js/*.js",
 css: "src/sours/sass/style.scss",
 images: "src/sours/img/**/*.{jpg,png,svg,gif,ico}",
 fonts: "src/sours/fonts/**/*.*"
},
 watch: {
 html: "src/**/*.html",
 js: "src/sours/js/*.js",
 css: "src/sours/sass/*.scss",
 images: "src/sours/img/**/*.{jpg,png,svg,gif,ico}",
 fonts: "src/sours/fonts/**/*.*"
},
 clean: "./dist"
}



/* Tasks */
browserSync function(done) {
browsersync.init({
 server: {
 baseDir: "./dist/"
},
 port: 3000
});
done();
}

browserSyncReload function(done) {
browsersync.reload();
}
function html() {
panini.refresh();
 return src(path.src.html, { base: "src/" })
.pipe(plumber())
.pipe(panini({
 root: 'src/',
 layouts: 'src/tpl/layouts/',
 partials: 'src/tpl/partials/',
 helpers: 'src/tpl/helpers/',
 data: 'src/tpl/data/'
}))
.pipe(dest(path.build.html))
.pipe(browsersync.stream());
}

function css() {
 return src(path.src.css { base: "src/sours/sass/" })
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
 overrideBrowserslist: ['last 10 versions'],
 cascade: true
}))
.pipe(cssbeautify())
.pipe(dest(path.build.css))
.pipe(cssnano({
 zindex: false,
 discardComments: {
 removeAll: true
}
}))
.pipe(removeComments())
.pipe(rename({
 suffix: ".min",
 extname: ".css"
}))
.pipe(dest(path.build.css))
.pipe(browsersync.stream());
}

function js() {
 return src(path.src.js, {base: './src/sours/js/'})
.pipe(plumber())
.pipe(rigger())
.pipe(gulp.dest(path.build.js))
.pipe(uglify())
.pipe(rename({
 suffix: ".min",
 extname: ".js"
}))
.pipe(dest(path.build.js))
.pipe(browsersync.stream());
}

function images() {
 return src(path.src.images)
.pipe(imagemin())
.pipe(dest(path.build.images))
}
function fonts() {
 return src(path.src.fonts)
.pipe(dest(path.build.fonts))
}

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


function watchFiles() {
 gulp.watch([path.watch.html], html);
 gulp.watch([path.watch.css], css);
 gulp.watch([path.watch.js], js);
 gulp.watch([path.watch.images], images);
 gulp.watch([path.watch.fonts], fonts);
}

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



/* Exports Tasks */
exports.html = html;
exports.css = css;
exports.js = js;
exports.images = images;
exports.fonts = fonts;
exports.clean = clean;
exports.build = build;
exports.watch = watch;
exports.default = watch;
April 7th 20 at 11:03
2 answers
April 7th 20 at 11:05
The problem was solved myself, the problem was incorrect path specified to the style in the folder dist =) and the Assembly is working=)
April 7th 20 at 11:07
I have in this Assembly, the connection does not work styles((
See the output metatags and title, but the styles do not connect...
"use strict";

const {src, dest} = require("gulp");
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const removeComments = require('gulp-strip-css-comments');
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const cssnano = require("gulp-cssnano");
const rigger = require("gulp-rigger");
const uglify = require("gulp-uglify");
const plumber = require("gulp-plumber");
const imagemin = require("gulp-imagemin");
const del = require("del");
panini const = require("panini");
const browsersync = require("browser-sync").create();

/* Paths */
var path = {
build: {
html: "dist/",
js: "dist/assets/js/",
css: "dist/assets/css/",
images: "dist/assets/img/",
fonts: "dist/assets/fonts/"
},
src: {
html: "src/*.html",
js: "src/assets/js/*.js",
css: "src/assets/sass/style.scss",
images: "src/assets/img/**/*.{jpg,png,svg,gif,ico}",
fonts: "src/assets/fonts/**/*.{otf,ttf,woff,woff2,svg,eot}"
},
watch: {
html: "src/**/*.html",
js: "src/assets/js/**/*.js",
css: "src/assets/sass/**/*.scss",
images: "src/assets/img/**/*.{jpg,png,svg,gif,ico}",
fonts: "src/assets/fonts/**/*.{otf,ttf,woff,woff2,svg,eot}"
},
clean: "./dist"
}

/* Tasks */
browserSync function(done) {
browsersync.init({
server: {
baseDir: "./dist/"
},
port: 3000
});
}

browserSyncReload function(done) {
browsersync.reload();
}

function html() {
panini.refresh();
return src(path.src.html, { base: "src/" })
.pipe(plumber())
.pipe(panini({
root: 'src/',
layouts: 'src/tpl/layouts/',
partials: 'src/tpl/partials/',
helpers: 'src/tpl/helpers/',
data: 'src/tpl/data/'
}))
.pipe(dest(path.build.html))
.pipe(browsersync.stream());
}

function css() {
return src(path.src.css { base: "src/assets/sass/" })
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
Browserslist: ['last 10 versions'],
cascade: true
}))
.pipe(cssbeautify())
.pipe(dest(path.build.css))
.pipe(cssnano({
zindex: false,
discardComments: {
removeAll: true
}
}))
.pipe(removeComments())
.pipe(rename({
suffix: ".min",
extname: ".css"
}))
.pipe(dest(path.build.css))
.pipe(browsersync.stream());
}

function js() {
return src(path.src.js, {base: './src/assets/js/'})
.pipe(plumber())
.pipe(rigger())
.pipe(gulp.dest(path.build.js))
.pipe(uglify())
.pipe(rename({
suffix: ".min",
extname: ".js"
}))
.pipe(dest(path.build.js))
.pipe(browsersync.stream());
}

function images() {
return src(path.src.images)
.pipe(imagemin())
.pipe(dest(path.build.images));
}

function fonts() {
return src(path.src.fonts)
.pipe(dest(path.build.fonts));
}
function clean() {
return del(path.clean);
}

function watchFiles() {
gulp.watch([path.watch.html], html);
gulp.watch([path.watch.css], css);
gulp.watch([path.watch.js], js);
gulp.watch([path.watch.images], images);
gulp.watch([path.watch.fonts], fonts);
}

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

/* Exports Tasks */
exports.html = html;
exports.css = css;
exports.js = js;
exports.images = images;
exports.fonts = fonts;
exports.clean = clean;
exports.build = build;
exports.watch = watch;
exports.default = watch;

Specify the path to the style folder dist, (link rel="stylesheet" href="assets/css/style.min.css) the same scripts and everything, the browser looks in the folder dist. - Gerardo_Gerlach commented on April 7th 20 at 11:10
@Georgiana.Ruecker, thanks, it's not my care was))
I duplicated the src folder in the layouts folder there in the file did connection - Annamae13 commented on April 7th 20 at 11:13

Find more questions by tags SassGulp.js