🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

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

Sass

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

HTML

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

gulp

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

Q&A

解決済

2回答

12119閲覧

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

gaun518

総合スコア13

JavaScript

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

Sass

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

HTML

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

gulp

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

0グッド

1クリップ

投稿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

1// gulp 4 で記述 2// 実行後の処理については、最下部に記載 3 4 5// gulpプラグインの読み込み 6var gulp = require('gulp'); 7 8// Sassをコンパイルするプラグインの読み込み 9var sass = require('gulp-sass'); 10 11// browser-syncのプラグインの読み込み 12var browserSync = require("browser-sync"); 13 14 15// ローカルサーバーの立ち上げ 16gulp.task("sync", function () { 17 18 // browsre-sync のサーバー立ち上げ処理 19 browserSync({ 20 server: { 21 baseDir: "../html/", // ルートとなるディレクトリを指定 22 notify: true, // 画面右上の通知の設定 23 } 24 }); 25 26}); 27 28 29// リロード処理 30gulp.task("watch", function () { 31 32 gulp.watch('../html/flocss/**/*.scss', gulp.task('sass')) 33 gulp.watch('../html/flocss/**/*.scss', gulp.task('reload')) 34 35}); 36 37 38// watch 処理 39gulp.task("reload", function () { 40 41 browserSync.reload(); // ファイルに変更があれば同期しているブラウザをリロード 42 43}); 44 45 46// scss の監視タスクを作成する 47gulp.task('sass', function () { 48 49 // ('')内で取得する scss ファイルを指定 50 return gulp.src('../html/flocss/**/*.scss') 51 52 // sassのコンパイルを実行 53 .pipe(sass({ 54 55 outputStyle: 'compressed', // expanded({}の頭が揃う)、nested(ネストがインデントされる)、compact(規則集合毎が1行になる)、compressed(全CSSコードが1行になる) 56 57 }) 58 59 // Sassのコンパイルエラーを表示 60 // (これがないと自動的に止まってしまう) 61 .on('error', sass.logError)) 62 63 // ('')内でコンパイル後の保存場所を指定 64 .pipe(gulp.dest('../html/assets/css/')) 65 .pipe(gulp.dest('../../public/assets/css/')) 66 67}); 68 69 70gulp.task('default', 71 gulp.parallel('sass', 'sync', 'reload', 'watch') 72); 73

試したこと

日本のブログは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" }

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

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

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

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

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

s8_chu

2019/01/17 08:32

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

回答2

0

ベストアンサー

私も同じ場所ではまりました。今はこのようにしています。

js

1// ローカルサーバーの立ち上げ 2const browserSyncOption = { 3 port: 8080, 4 server: { 5 baseDir: './dist/', 6 index: 'index.html' 7 }, 8 reloadOnRestart: true 9}; 10 11function sync(done) { 12 browserSync.init(browserSyncOption); 13 done(); 14} 15// watch&リロード 処理 16function watchFiles(done) { 17 const browserReload = () => { 18 browserSync.reload(); 19 done(); 20 }; 21 gulp.watch(paths.styles.src).on('change', gulp.series(styles, browserReload)); 22 gulp.watch(paths.scripts.src).on('change', gulp.series(scripts, esLint, browserReload)); 23 gulp.watch(paths.html.src).on('change', gulp.series(html, browserReload)); 24} 25 26gulp.task('default', gulp.series(gulp.parallel(scripts, styles, html), gulp.series(sync, watchFiles))); 27); 28

投稿2019/01/31 06:41

hibikikudo

総合スコア238

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

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

gaun518

2019/02/22 15:29

こちらのコードを参考にやってみたところ、無事に解決しました!ありがとうございました。
guest

0

//変更前 gulp.task("reload", function () { browserSync.reload(); });
//変更後 gulp.task("reload", function (done) { browserSync.reload(); done(); });

これで動作しませんかね?

投稿2019/01/24 06:30

Three4C

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問