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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

解決済

gulp 4 で browser-sync が、1度しかリロードしない。

gaun518
gaun518

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

2回答

0評価

1クリップ

9566閲覧

投稿2019/01/14 17:18

編集2019/01/14 17:24

前提・実現したいこと

絶対つまずかないGulp 4入門(2019年版) – インストールとSassを使うまでの手順

こちらの記事を元に gulp 4 を試してみました。

その後自分で browser-sync を試してみたところ、きちんと server が起動しブラウザが立ち上がりました。一度は、sass を更新するとリロードするのですが、2度目以降は、ブラウザが更新されません。2度目以降もリロードされるようにしたいです。

回答に足りない事項があれば、ご指摘いただけれると助かります。

筆者のレベル

html, sass, javascript: 1ヶ月程

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

[02:12:04] Starting 'default'... [02:12:04] Starting 'sass'... [02:12:04] Starting 'sync'... [02:12:04] Starting 'reload'... [02:12:04] Starting 'watch'... [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: **** -------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 -------------------------------------- [Browsersync] Serving files from: ../html/ [02:12:05] Finished 'sass' after 347 ms [02:12:29] Starting 'sass'... [02:12:29] Starting 'reload'... [02:12:29] Finished 'sass' after 52 ms [Browsersync] Reloading Browsers... [02:12:32] Starting 'sass'... [02:12:32] Finished 'sass' after 83 ms [02:12:36] Starting 'sass'... [02:12:36] Finished 'sass' after 77 ms [02:12:39] Starting 'sass'... [02:12:39] Finished 'sass' after 75 ms [02:12:40] Starting 'sass'... [02:12:40] Finished 'sass' after 73 ms

該当のソースコード

gulp

// gulp 4 で記述 // 実行後の処理については、最下部に記載 // gulpプラグインの読み込み var gulp = require('gulp'); // Sassをコンパイルするプラグインの読み込み var sass = require('gulp-sass'); // browser-syncのプラグインの読み込み var browserSync = require("browser-sync"); // ローカルサーバーの立ち上げ gulp.task("sync", function () { // browsre-sync のサーバー立ち上げ処理 browserSync({ server: { baseDir: "../html/", // ルートとなるディレクトリを指定 notify: true, // 画面右上の通知の設定 } }); }); // リロード処理 gulp.task("watch", function () { gulp.watch('../html/flocss/**/*.scss', gulp.task('sass')) gulp.watch('../html/flocss/**/*.scss', gulp.task('reload')) }); // watch 処理 gulp.task("reload", function () { browserSync.reload(); // ファイルに変更があれば同期しているブラウザをリロード }); // scss の監視タスクを作成する gulp.task('sass', function () { // ('')内で取得する scss ファイルを指定 return gulp.src('../html/flocss/**/*.scss') // sassのコンパイルを実行 .pipe(sass({ outputStyle: 'compressed', // expanded({}の頭が揃う)、nested(ネストがインデントされる)、compact(規則集合毎が1行になる)、compressed(全CSSコードが1行になる) }) // Sassのコンパイルエラーを表示 // (これがないと自動的に止まってしまう) .on('error', sass.logError)) // ('')内でコンパイル後の保存場所を指定 .pipe(gulp.dest('../html/assets/css/')) .pipe(gulp.dest('../../public/assets/css/')) }); gulp.task('default', gulp.parallel('sass', 'sync', 'reload', 'watch') );

試したこと

日本のブログは20ページくらい、youtube(英語、ロシア語)などを閲覧して、当たりどころを付けてやっていましたが、なかなか回答に至りませんでした。

補足情報(FW/ツールのバージョンなど)

package.json の内容を記述します。

"name": "****", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "****" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.26.3", "gulp": "^4.0.0", "gulp-sass": "^4.0.2", "gulp-uglify": "^3.0.1" }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

s8_chu
s8_chu

2019/01/17 08:32

ディレクトリ構造がどのようになっているのかを、質問文に追記していただけませんか?

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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