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

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

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

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

gulp

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

Q&A

0回答

1152閲覧

Gulpでブラウザ更新(bs-reload)が数回発火される

sleeeep12

総合スコア36

JavaScript

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

gulp

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

1グッド

0クリップ

投稿2020/01/06 09:24

ネットで調べながらGulpの開発環境を作ってるのですが、ブラウザ自動更新が2回発火になってしまいます。
これを上手いこと1回にまとめたいのですが、アドバイス頂けないでしょうか。

gulp

1const gulp = require('gulp'); 2const browserSync= require('browser-sync'); 3const autoprefixer = require("gulp-autoprefixer"); 4const plumber = require('gulp-plumber'); 5const rename = require('gulp-rename'); 6const ejs = require("gulp-ejs"); 7const sass = require('gulp-sass'); 8const imagemin = require('gulp-imagemin'); 9const pngquant = require('imagemin-pngquant'); 10const mozjpeg = require('imagemin-mozjpeg'); 11const changed = require('gulp-changed'); 12const cleancss = require('gulp-clean-css'); 13const sourcemaps = require('gulp-sourcemaps'); 14const watch = require( 'gulp-watch' ); 15const webpackStream = require("webpack-stream"); 16const webpack = require("webpack"); 17const webpackConfig = require("./webpack.config"); 18const connect = require('gulp-connect-php'); 19 20const ROOT = './'; 21const SRC = 'src/'; 22const DST = 'dist/'; 23const SRC_CSS = SRC + '**/*.css'; 24const SRC_SASS = SRC + 'scss/**/*.scss'; 25const SRC_PHP = SRC + '**/*.php'; 26const DST_PHP = DST + '**/*.php'; 27const SRC_PHP_ALL = SRC + '**/**/*.php'; 28const SRC_JS = SRC + 'js/**/*.js'; 29 30// PHP 31gulp.task('php', function (done) { 32 gulp.src(SRC_PHP) 33 .pipe(gulp.dest('dist/')) 34 done(); 35}); 36 37// CSS 38gulp.task('css', function (done) { 39 gulp.src(SRC_CSS) 40 .pipe(gulp.dest('dist/')) 41 done(); 42}); 43 44// webpack 45gulp.task('webpack', function(){ 46 return webpackStream(webpackConfig, webpack).on('error', function (e) { 47 this.emit('end'); 48 }) 49 .pipe(plumber({ 50 errorHandler: function (error) { 51 console.log(error.message); 52 this.emit('end'); 53 }})) 54 .pipe(gulp.dest('dist/js')); 55}); 56 57 58// ブラウザの自動リロード 59gulp.task('bs-reload', function (done){ 60 browserSync.init({ 61 proxy: 'localhost/connect' 62 }); 63 browserSync.reload(); 64 done(); 65}); 66 67// sass 68gulp.task('sass', function(done){ 69 var option = { 70 outputStyle: 'expanded', 71 }; 72 gulp.src(SRC_SASS) 73 .pipe(plumber({ 74 errorHandler: function (error) { 75 console.log(error.message); 76 this.emit('end'); 77 }})) 78 .pipe(sourcemaps.init()) 79 .pipe(sass(option)) 80 .pipe(autoprefixer()) 81 .pipe(cleancss()) 82 .pipe(sourcemaps.write(ROOT)) // マップファイルを出力するパスを指定します 83 .pipe(gulp.dest('dist/css')) 84 done(); 85}); 86 87// imagemin 88gulp.task('imagemin', function(){ 89 gulp.src(SRC + 'img/**/*.{jpg,jpeg,png,gif,svg,ico}') 90 .pipe(plumber({ 91 errorHandler: function (error) { 92 console.log(error.message); 93 this.emit('end'); 94 }})) 95 .pipe(changed('./dist/img')) 96 .pipe(imagemin([ 97 pngquant({ 98 quality: [.7, .85], 99 speed: 1 100 }), 101 imagemin.jpegtran({ 102 quality: 80, 103 progressive: true 104 }), 105 imagemin.svgo(), 106 imagemin.optipng(), 107 imagemin.gifsicle() 108 ])) 109 .pipe(gulp.dest('dist/img')) 110}); 111 112//watch 113gulp.task('watch',function(){ 114 gulp.watch("**/*.scss", gulp.task('sass')); 115 gulp.watch("src/**/*.css", gulp.task('css')); 116 gulp.watch("src/**/*.php", gulp.series('php','bs-reload')); 117 gulp.watch("dist/**/*.css", gulp.task('bs-reload')); 118 gulp.watch("src/**/*.js", gulp.series('webpack','bs-reload')); 119 gulp.watch("src/**/*.{jpg,jpeg,png,gif,svg,ico}", gulp.task('imagemin')); 120}); 121 122gulp.task('default', gulp.series(gulp.parallel('css','sass','imagemin','webpack','watch'),function(done){ 123 done(); 124})); 125

原因はgulp.taskの「watch」にあるのでしょうか。
ここら辺がまだ手探りで書いていて、watchタスクでbs-reloadが3箇所に指定してあります。
最後のdefaultで発火させてるwatchで、この3つが発火されているということなのでしょうか。

この場合、現状のコードからどのようにすれば綺麗にbs-reloadを1回にまとめられるかを知りたく、、、
どうか、ご教授よろしくお願いいたします。

takuhito_hihara👍を押しています

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問