примерно так, не проверял.
https://gulpjs.com/docs/en/getting-started/creatin...
установить зависимости
npm install gulp sass browser-sync del --save-dev
// gulpfile.js
'use strict';
const { src, dest, lastRun, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();
const del = require('del');
const path = {
templates: {
src: 'src/templates/*.html',
dest: 'build',
watching: 'src/templates/**/*.html',
},
styles: {
src: 'src/styles/main.scss',
dest: 'build/assets/css',
watching: 'src/styles/parsials/**/*.scss',
},
fonts: {
src: 'src/fonts/*',
dest: 'build',
watching: 'src/fonts/**/*',
},
images: {
src: 'src/images/*',
dest: 'build',
watching: 'src/images/**/*',
},
};
function cleanup() {
return del([path.build]);
}
function server() {
browserSync.init({
server: {
baseDir: './build/',
},
port: 3004,
open: false,
notify: true,
browser: 'default',
online: true,
// logLevel: 'debug',
});
}
function templates() {
return src(path.templates.src)
.pipe(dest(path.templates.dest))
.on('end', browserSync.reload);
}
function styles() {
return src(path.styles.src)
.pipe(sass.sync())
.pipe(dest(path.styles.dest))
.on('end', browserSync.reload);
}
function watching() {
watch(path.templates.watching, series('templates'));
watch(path.styles.watching, series('styles'));
watch(path.images.watching, series('images'));
}
exports.default = series(templates, styles);
exports.development = series(cleanup, exports.default, parallel(watching, server));
// package.json добавить
.....
"scripts": {
"start": "gulp development",
},
.......
запуск
npm run start