質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

1回答

488閲覧

BrowserSyncが正しいcssを表示しない

yuki0401

総合スコア13

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2019/04/02 12:37

編集2019/04/02 14:06

前提・実現したいこと

gulpでsassをコンパイルした際に、BrowserSyncで更新した内容が反映されない。

発生している問題・エラーメッセージ

例えば

font-size: 10px;

と一度書いてコンパイルした後

font-size: 14px; display: block;

と書き直すと、新しく書いたdisplay:blockは反映されるが
font-sizeは変わらない。
一度対象コードを消してコンパイルして、その後に正しいコードを書くしか方法が無い。

※cssは正しく更新されています。それがBrowser Syncで反映されない。
コンパイルすると、コードは古いままですが、一応ブラウザは更新されます。

該当のソースコード

gulpfile.js

var gulp = require('gulp'); var pug = require("gulp-pug"); var fs = require("fs"); var data = require("gulp-data"); var browserSync = require("browser-sync"); var sass = require('gulp-sass'); var cssmin = require('gulp-cssmin'); var rename = require('gulp-rename'); var autoprefixer = require('gulp-autoprefixer'); var notify = require('gulp-notify'); var plumber = require('gulp-plumber'); //Pug(テンプレートエンジン) gulp.task('pug', function () { return gulp.src( ["src/**/*.pug", '!' + "src/**/_*.pug"] //参照するディレクトリ、出力を除外するファイル ) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(data(file => { return JSON.parse(fs.readFileSync(`./pages.json`)); })) .pipe(pug({ pretty: true })) .pipe(gulp.dest("dist/")) //出力先 .pipe(notify('pugをコンパイルしました!')); }); //Sass gulp.task('scss', function () { return gulp.src( ["src/assets/scss/**/*.scss", '!' + "src/assets/scss/**/_*.scss"] //参照するディレクトリ、出力を除外するファイル ) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(gulp.dest("dist/assets/css/")) //出力先 .pipe(notify('scssをコンパイルしました!')); }); //css min gulp.task('cssmin', function () { return gulp.src('./dist/assets/css/*.css') .pipe(cssmin()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('./dist/assets/css/')); }); //Browser Sync gulp.task('browser-sync', function () { browserSync.init({ server: { baseDir: "./dist/" } }); }); //リロード gulp.task('reload', function (done) { browserSync.reload(); done(); }); //watch gulp.task('watch', function () { gulp.watch('./src/*.pug', gulp.series('pug', 'reload')); gulp.watch('./src/**/_*.pug', gulp.series('pug', 'reload')); gulp.watch('./src/**/*.pug', gulp.series('pug', 'reload')); gulp.watch('./pages.json', gulp.series('pug', 'reload')); gulp.watch('./src/assets/scss/*.scss', gulp.series('scss', 'reload')); gulp.watch('./src/assets/scss/**/_*.scss', gulp.series('scss', 'reload')); }); gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch', 'pug', 'scss')))

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

gulp3とgulp4がごちゃまぜになっているので、まずそれをきれいにした方が良いですね。

投稿2022/08/09 11:16

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問