gulpでブラウザをreloadしたいのですが、反応しません。
タスクは実行されているようなのですが、ブラウザ側での反応がありません。
どなたかお教え願えますでしょうか。
gulpfile.js
var gulp = require("gulp"); var pug = require("gulp-pug"); var sass = require("gulp-sass"); var browser = require("browser-sync").create(); var plumber = require("gulp-plumber"); //ブラウザ用のサーバー立ち上げ gulp.task("browser", function (done) { browser.init({ server: { baseDir: "./static" }, reloadOnRestart: true }) done(); console.log('立ち上げ!'); }); gulp.task('reload', function (done) { browser.reload(); done(); console.log('再読み込み'); }); //pugをhtmlにコンパイルする gulp.task("pug", function (done) { gulp.src("./source/pug/**/*.pug") .pipe(plumber()) .pipe(pug({ pretty: true })) .pipe(gulp.dest("./static")) // .pipe(browser.reload({ stream: true })) done(); console.log('パグ'); }); //sassをcssにコンパイルする gulp.task("sass", function (done) { gulp.src("./source/scss/**/*.scss") .pipe(plumber()) .pipe(sass({ outputStyle: 'expand' })) .pipe(gulp.dest("./static/style.css")) // .pipe(browser.reload({ stream: true })) done(); console.log('サス'); }); //ファイルを保存した時自動的にタスクを実行 //watch(['監視するファイル'],['実行したいタスク名']) gulp.task('watch', function () { gulp.watch("./source/sass/**/*.scss", gulp.task('sass')); gulp.watch("./source/pug/**/*.pug", gulp.task('pug')); gulp.watch('./**', gulp.task('reload')); // ブラウザの自動リロード console.log('ウォッチ'); }); gulp.task('default', gulp.series('pug', 'sass', 'browser', 'watch'));
package.json
{ "name": "gulp_base", "version": "1.0.0", "description": "gulp_base", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "private": true, "author": "", "license": "ISC", "dependencies": { "browser-sync": "^2.26.7", "gulp": "^4.0.2", "gulp-plumber": "^1.2.1", "gulp-pug": "^4.0.1", "gulp-sass": "^4.0.2" } }
問題が再現しませんでした。使用しているブラウザや OS のバージョンを教えていただけませんか?
あなたの回答
tips
プレビュー