Gulp — BrowserSync выдаёт «cant get /», как решить проблему?

Question

[Kizzeon]

У меня есть gulpfile выполняющий обработку css и livereload:

const gulp         = require('gulp'),
	  browserSync  = require('browser-sync'),
	  concat       = require('gulp-concat'),
	  cleanCSS     = require('gulp-clean-css'),
	  del          = require('del'),
	  autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
	return gulp.src('./css/*.css')
		.pipe(concat('style.css'))
		.pipe(autoprefixer())
		.pipe(cleanCss({
			level: 2
		}))
		.pipe(gulp.dest('./dist/css'))
});

gulp.task('clean', async function() {
	return del.sync('./dist/css/*');
});

gulp.task('browser-sync', function() {
    browserSync({
        server: { 
            baseDir: './'
        },
        notify: false
    });
});

gulp.task('watch', gulp.series('browser-sync'), function() {
    gulp.watch("./css/*.css", browserSync.reload);
    gulp.watch("./html/*.html", browserSync.reload);
});

gulp.task('default', gulp.series('watch'));
gulp.task('build', gulp.parallel('clean', 'styles'));

Билд работает хорошо, но лайв релоад упрямо отказывается работать: Если вписать папку проекта то на странице отображается "CANT GET /", а если вписать папку с html файлами то он обновляет только html и вообще не подключает стили

В чём может быть проблема?

Comments

[RAX7]

добавь к конфигу сервера directory: true

server: { 
            baseDir: './',
            directory: true
        },

и посмотри что откроется в браузере.
Скорее всего baseDir должен быть './dist'

[Kizzeon]

RAX7, Добавил directory, захожу в папку, открываю рандомный файл и при его изменении браузер не обновляется =(

[Kotovasofa]

Вот вам пример моего gulp файла, попробуйте построчно пройти, проанализировать, и сделать на моем примере. Сравнив, найдете ошибку.

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat')
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const gcmq = require('gulp-group-css-media-queries');
const uglify = require('gulp-uglify');

const config = {
    src: '.',
    css: {
        watch: '/precss/**/*.sass',
        src: '/precss/main.sass',
        dest: '/project/assets/css'
    },
    html: {
        src: '/project/*.html'
    },
    php: {
        src: '/project/*.php'
    }
};

gulp.task('build', function () {
    return gulp.src(config.src + config.css.src)
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(gcmq())
            .pipe(autoprefixer({
                overrideBrowserslist:  ['> 0.01%'],
                cascade: false
            }))
            // .pipe(cleanCSS({
            //     level: 2
            // }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest(config.src + config.css.dest))
            .pipe(browserSync.reload({
                stream: true
            }));
});


gulp.task('watch', function () {
    gulp.watch(config.src + config.css.watch, gulp.parallel('build'));
    gulp.watch(config.src + config.html.src).on('change', browserSync.reload);
    gulp.watch(config.src + config.php.src).on('change', browserSync.reload);
});

gulp.task('browserSync', function () {
    browserSync.init({
        proxy: "http://project/",
        notify: false,
    });
});


gulp.task('default', gulp.parallel('watch','browserSync', 'build'));

[Kizzeon]

Воспользовался готовым решением - Optimized HTML 5, сейчас мой gulp file выглядит так:

var gulp         = require('gulp'),
	sass         = require('gulp-sass'),
	browserSync  = require('browser-sync').create(),
	concat       = require('gulp-concat'),
	// uglify       = require('gulp-uglify-es').default,
	cleancss     = require('gulp-clean-css'),
	autoprefixer = require('gulp-autoprefixer');

gulp.task('browser-sync', function() {
	browserSync.init({
		server: {
			baseDir: 'app'
		},
		notify: false,
	})
});

function bsReload(done) { browserSync.reload(); done(); };


gulp.task('styles', function() {
	return gulp.src('app/sass/*.sass')
	.pipe(sass({
		outputStyle: 'expanded',
		includePaths: [__dirname + '/node_modules']
	}))
	.pipe(concat('style.css'))
	.pipe(autoprefixer())
	.pipe(cleancss( { level: 2 } ))
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.stream())
});

// Scripts & JS Libraries
// gulp.task('scripts', function() {
// 	return gulp.src([
// 		'app/js/_libs.js', // JS libraries (all in one)
// 		'app/js/_custom.js', // Custom scripts. Always at the end
// 		])
// 	.pipe(concat('scripts.min.js'))
// 	.pipe(uglify()) // Minify js (opt.)
// 	.pipe(gulp.dest('app/js'))
// 	.pipe(browserSync.reload({ stream: true }))
// });

gulp.task('code', function() {
	return gulp.src('app/*.html')
	.pipe(browserSync.reload({ stream: true }))
});


gulp.task('watch', function() {
	gulp.watch('app/sass/*.sass', gulp.parallel('styles'));
	// gulp.watch(['app/js/_custom.js', 'app/js/_libs.js'], gulp.parallel('scripts'));
	gulp.watch('app/*.html', gulp.parallel('code'));
});

gulp.task('default', gulp.series('styles', gulp.parallel('browser-sync', 'watch')));

[Kizzeon]

Kizzeon, Всё работает на ура, не знаю, насколько оптимизирован этот галп файл, но меня он устраивает =)