Как добавить gulp 4?

Question

[Виталий]

Добрый день.

Есть app.js следующего вида:

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 уже перенес на gulp, но каждый раз запускать ее отдельно неудобно, да и не правильно.
Поэтому стараюсь разобраться как следить за изменением файлов Pug и Scss. Как понял для этого можно использовать browserSync.

Вот содержимое 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);

Пока пытаюсь разобраться хотя бы с компиляцией Scss.
По команде npm app.js не происходит перекомпиляции после сохранения измененного Scss.
По команде gulp открывается пустой сервер (Cannot GET /). ТО есть не работает маршрутизация из app.js.
При запуске node app.js && gulp сервер запускается, но опять же никакой реакции на изменение.

Как я понимаю после запуска сервера командой app.listen(3000); в app.js он начинает работать отдельно от того, что делает browserSync. При этом если работать с сервером, который создает browserSync - нужно переносить логику работы с pug в gulpfile.js, но я подразумеваю что в app.js будут происходить далее некоторые простые вычисления, результаты которых будут нужны для компиляции pug.

Короче я запутался, подскажите как правильно сделать.

Спасибо!

Comments

[Виталий]

Вопрос скорее в том, как реализовать базу Gulp 4 + Express + Sass + Pug, чтобы удобно было верстать, так как я люблю часто сохраняться и смотреть что получилось в браузере. И чтобы на основе этой базы можно было дальше строить и усложнять функционал приложения.

Answer 1

[Анатолий Куликов]

Если я правильно понял, то вам нужно сделать так, чтобы при изменении файлов пересобирался проект и результат отображался в браузере.

Для этого вам нужно использовать gulp.watch(), который как раз следит за изменениями в файлах и в зависимости от их типа/других условий запускает нужную задачу.

Как только задача по пересборке будет завершена, browsersync обновит вам страницу.

Вот тут пример приведен.

Comments

[Виталий]

Я это смотрел, спасибо.
Чтобы создать веб-сервер с помощью browserSync, все статические файлы должны быть в директории /dir, к примеру.
У меня есть только папка views с pug, которые рендерятся непосредственно при запуске проекта, средствами express, то есть у меня нет html вообще.
То есть мне нужно выбирать, либо запустить npm app.js, либо запустить gulp. В первом случае у меня нет никаких gulp.watch, во втором случае у меня нет вообще ничего кроме собранных css.

Как это вообще делается в реальных проектах?
Вот у меня API и рендеринг pug, все в app.js (express.js). Но при этом я хочу ещё и верстать этот интерфейс одновременно, с вотчерами и перезагрузка браузера после каждой правки.