A
A
Alexander2020-02-10 20:30:37
Sass
Alexander, 2020-02-10 20:30:37

Why doesn't Gulp update styles on change in 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");
const panini = 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 */
function browserSync(done) {
    browsersync.init({
        server: {
            baseDir: "./dist/"
        },
        port: 3000
    });
    done();
}

function browserSyncReload(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;

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander, 2020-02-11
@Nerzula

I solved the problem myself, the problem was in the wrong path to the style in the dist folder =) and so the assembly is working =)

S
Sergh_D, 2020-02-12
@Sergh_D

In this assembly, the connection of styles does not work for me ((
He sees meta tags and title in the output, but the styles do not connect ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question