Как отобразить стили на локальном хосте?

Question

[Ferum1]

Здравствуйте, только осваиваю Gulp и столкнулся с такой проблемой, не отображаются стили когда запущен локальный хост, пробовал изменять пути в index.html. При стандартном пути D:/node/build/css/all.css в браузере выскакивает ошибка, изменил путь на localhost:3000/node/build/css/all.css выскочила другая ошибка. Кто нибудь сталкивался?
фото прикрепляю

Comments

[AndreyWayneMaster]

пропиши путь стилей относительно самого файла html
при сборке без определнных конфигов там классические пути - а у тебя именно они

[Ferum1]

AndreyWayneMaster, честно говоря не понял:)
можешь более проще сказать?
разве этот путь не будет является относительным D:/node/build/css/all.css в html ?

[Ferum1]

Олег Жорников,

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



const cssFiles = [
	'./src/css/style.less',
];

const jsFiles = [
	'./src/js/lib.js',
	'./src/js/some.js'
];

function styles(){
	return gulp.src(cssFiles)
	.pipe(concat('all.css'))
	.pipe(sourcemaps.init())
				
				.pipe(less())
				.pipe(gcmq())
				.pipe(autoprefixer({ browsers: ['>0.1%'], cascade: false }))
				.pipe(cleanCSS({
					level: 2
				}))	
				.pipe(sourcemaps.write('.'))
				.pipe(gulp.dest('./build/css'))
				.pipe(browserSync.stream());
}

function scripts(){
	return gulp.src(jsFiles)
				.pipe(concat('all.js'))
				.pipe(uglify({
					toplevel: true
					}))
				.pipe(gulp.dest('./build/js'))
				.pipe(browserSync.stream());
}

function watch(){
	 browserSync.init({
        server: {
            baseDir: "./"
        }
    });
	gulp.watch('./src/css/**/*.less', styles);
	gulp.watch('./src/js/**/*.js', scripts);
	gulp.watch("./*.html").on('change', browserSync.reload);
}

function clean(){
	return del(['build/*'])
}

gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('watch', watch);

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

а по поводу html и css, я там просто 4 блока создал и дал им бекграунд розовый, да и все, думаю прикреплять нет смысла

Answer 1

[monochromer]

Если файл index.html лежит внутри директории build и при условии baseDir: "./" для browser-sync, то путь нужно прописать так:

<link rel="stylesheet" href="build/css/<some-css-filename.css>">

Но я бы поменял директорию сервера: baseDir: "./build" и тогда пути записывались бы так:

<link rel="stylesheet" href="css/<some-css-filename.css>">