gulp cssが反映されない

現在gulpで自動sassコンパイル　自動リロードを構築しています。
ともに成功したのですがコンパイルされたcssがhtmlに反映されません。

試した事html内のcssパスの確認、とファイルの修正

gulpfile.js
1// gulpプラグインを読み込みます
2const { parallel, src, dest, watch } = require("gulp");
3// Sassをコンパイルするプラグインを読み込みます
4const sass = require('gulp-sass')(require('sass'));
5const webserver = require('gulp-webserver');
6
7/**
8 * Sassをコンパイルするタスクです
9 */
10const compileSass = () =>
11    src('./sass/**/*.scss')
12    .pipe(sass({outputStyle: 'expanded'}))
13    .pipe(dest('./css'))
14;
15
16/**
17 * Sassファイルを監視し、変更があったらSassを変換します
18 */
19const WatchSass = () =>
20    watch([
21        './sass/**/*.scss'
22    ], compileSass)
23;
24
25
26
27
28/**
29 * WebServer
30 */
31const webServer = () =>
32    src('app')
33    .pipe(webserver({
34        port: 8000,
35        livereload: true,
36        open: true
37    }))
38;
39
40// npx gulpというコマンドを実行した時、watchSassFilesが実行されるようにします
41// exports.compilecss = compileSass;
42exports.default = parallel(compileSass, WatchSass, webServer);
43

リロード部分のみ下のコードと入れ替え

gulpfile.js
1// ブラウザ自動リロード
2gulp.task('browser-reload', function(done) {
3  browserSync.reload()
4  done()
5})

3日間環境構築していて最後に動かなくて手が止まっています。
どうかアドバイスお願いします

ローカル環境のhtmlのソース追加

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6
7    <link rel="stylesheet" href="../css/test.css">
8</head>
9<body>
10テスト
11aaa
12<p>文字色変更</p>
13
14<script>//<![CDATA[
15document.write('<script src="//' + (location.hostname || 'localhost') + ':35729/livereload.js?snipver=1"></script>')
16//]]></script>
17</body>
18</html>

行動規範の内容に同意します

回答1件

質問ですがgulpで出力されたCSSに直接なにか書き込むとその内容は反映されますか？

投稿2021/07/19 09:07

agumon

総合スコア271

kazumad

2021/07/19 09:31

コメントありがとうございます htmlを直接開くと反映されるのですが、npx gulpでローカル環境で開くと反映されなくなります。

agumon

2021/07/19 09:42 編集

ローカル環境を開いて右クリックからソースを開き、CSSのパスからファイルは開ますか？

kazumad

2021/07/19 09:51

ソースはこうなりました。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/test.css"> </head> <body> テスト aaa <p>文字色変更</p> <script>//<![CDATA[ document.write('<script src="//' + (location.hostname || 'localhost') + ':35729/livereload.js?snipver=1"></script>') //]]></script> </body> </html>

agumon

2021/07/19 09:56

kazumad

2021/07/19 10:08

すみません　両方うまくいきませんでした。 cssをwatchするタスクとかあるのどうか今調べてやっています

kazumad

2021/07/19 10:34

css が検証のソースタブ開いてもなかったです　あと検証でjsのエラーがありました。写真は編集してアップしてあります

行動規範の内容に同意します