ネットで調べながら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回にまとめられるかを知りたく、、、
どうか、ご教授よろしくお願いいたします。
あなたの回答
tips
プレビュー