How to add gulp 4?

Good afternoon.

There app.js the following:
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);


Compilation S has already been moved to gulp, but every time I run it separately uncomfortable, and not right.
So try to figure out how to watch for changes in files Pug and Scss. As I understand you can use browserSync.

Here are the contents 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();

cssCompile function(){
 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 trying to understand at least compile the Scss.
The npm app.js happens to recompile after saving the changed Scss.
The gulp is a empty server (Cannot GET /). THAT is not running the routing of app.js.
When you run node app.js && gulp the server starts, but again no reaction to the change.

As I understand it after starting the server with the command app.listen(3000); in app.js he begins to work separately from browserSync. However, if you work with a server that creates browserSync - need to move the logic with pug in gulpfile.js but I mean that in a app.js will happen next, some simple calculations, the results of which will be needed for compilation, pug.

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

Thank you!
April 19th 20 at 12:31
1 answer
April 19th 20 at 12:33
If I understand correctly, you need to make it so that when you change files peresource the project and the result was displayed in the browser.

For this you need to use gulp.watch(), which monitors changes in files and, depending on their type/other conditions triggers the desired task.

As soon as the task of rebuilding is complete, browsersync will update you page.

Here there is an example given.
I watched it, thank you.
To create a web server with browserSync, all static files should be in directory /dir, for example.
I only have a views folder with a pug, which are rendered directly when you run the project, media express, then I have no html at all.
That is, I need to choose either to run npm app.js or you can run gulp. In the first case, I have no gulp.watch, in the second case, I have collected nothing but css.

How do you even do in real projects?
Now I have API and rendering of a pug, all in app.js (express.js). But I want to impose this interface simultaneously, with the watcher and restart the browser after every change. - Gust_Feest commented on April 19th 20 at 12:36

Find more questions by tags Gulp.jsExpress.jsPugSass