Добрый день.
Есть 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.
Короче я запутался, подскажите как правильно сделать.
Спасибо!
