How to add gulp 4?

Question

Sass

Good afternoon.

There is an app.js like this:

const express = require("express");
const app = express();

var pageInfo = {
    home: {
        link: "/",
        title: "Main page",
        description: "Some text"
    }
};

app.set("view engine", "pug");
app.use("/public/", express.static(__dirname + "/static/"));
app.use("/", function(request, response){
    response.render("home.pug", {
        meta: pageInfo.home
    });
});
app.get("*", function(request, response){
    response.sendStatus("404");
});
app.listen(3000);

Sсss compilation has already been transferred to gulp, but running it separately each time is inconvenient, and not correct.
Therefore, I try to figure out how to monitor changes in Pug and Scss files. As I understand it, you can use browserSync for this.

Here is the content of gulpfile.js

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const minifyCss = require('gulp-minify-css');
const browserSync = require('browser-sync').create();

function cssCompile(){
    return src('static/sass/**/*.s?ss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 10 versions'],
            cascade: false
        }))
        .pipe(minifyCss({
            compatibility: 'ie8'
        }))
        .pipe(dest('static/css/'))
        .pipe(browserSync.reload({stream: true}));
}

function server(done){
    browserSync.init({
        server: {
            baseDir: '/'
        },
        notify: false
    });
      
    watch('static/sass/**/*.s?ss', cssCompile);
    done();
}

exports.cssCompile = cssCompile;
exports.server = server;
exports.default = series(cssCompile, server);

While I'm trying to figure out at least with the compilation of Scss.
The npm app.js command does not recompile after saving the modified Scss.
The gulp command opens an empty server (Cannot GET /). THAT is, routing from app.js does not work.
Running node app.js && gulp starts the server, but again no response to the change.

As I understand it, after starting the server with the command app.listen(3000); in app.js it starts to work separately from what browserSync does. At the same time, if you work with the server that creates browserSync, you need to transfer the logic of working with pug to gulpfile.js, but I mean that some simple calculations will take place in app.js, the results of which will be needed to compile pug.

In short, I'm confused, tell me how to do it right.

Thank you!

Answer 1

If I understand correctly, then you need to make sure that when changing files, the project is rebuilt and the result is displayed in the browser.
To do this, you need to use gulp.watch (), which just watches for changes in files and, depending on their type / other conditions, launches the necessary task.
Once the rebuild task is complete, browsersync will refresh the page for you.
Here is an example .