前提・実現したいこと
gulpのbrowser-syncを使ってブラウザの自動更新を行いたいです。
発生している問題・エラーメッセージ
gulpを実行しようとすると、以下の通り"Starting 'default'..."で止まってしまいブラウザが自動で立ち上がりません。
[10:04:45] Using gulpfile ~\Desktop\test\gulp\gulpfile.js
[10:04:45] Starting 'default'...
ちなみに同じ構造で会社のPCで実行したところブラウザが自動的に立ち上がり問題なく自動更新もされたのですが、自宅のPCだとこのようになってしまいます。
そのためコード自体のエラーというよりサーバーなどの環境に原因があるのでは?と思っています。
該当のソースコード
gulpfile.jsです。
//ブラウザ自動リロード
var gulp = require('gulp');
var browsersync = require("browser-sync").create();
// サーバーを立ち上げる
gulp.task('build-server', function (done) {
browsersync.init({
server: {
baseDir: "../"
}
});
done();
console.log('Server was launched');
});
// 監視ファイル
gulp.task('watch-files', function(done) {
gulp.watch("../.html", gulp.task('browser-reload'));
gulp.watch("..//.css", gulp.task('browser-reload'));
gulp.watch("..//*.js", gulp.task('browser-reload'));
done();
console.log(('gulp watch started'));
});
// ブラウザのリロード
gulp.task('browser-reload', function (done){
browsersync.reload();
done();
console.log('Browser reload completed');
});
// タスクの実行
gulp.task('default', gulp.series('build-server', 'watch-files', function(done){
done();
console.log('Default all task done!');
}));
//画像自動圧縮
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const changed = require('gulp-changed');
gulp.task("imagemin", function () {
return gulp
.src('../info/img/')
.pipe(changed('../info/img/min'))
.pipe(
imagemin([
pngquant({
quality: [.60, .70], // 画質
speed: 1 // スピード
}),
mozjpeg({ quality: 65 }), // 画質
imagemin.svgo(),
imagemin.optipng(),
imagemin.gifsicle({ optimizationLevel: 3 }) // 圧縮率
])
)
.pipe(gulp.dest('../info/img/min'));
});
// watch
gulp.task('default', function() {
gulp.watch('../info/img/', gulp.task('imagemin'));
});
//Sassコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
gulp.task('sass', function() {
return gulp.src('../info//*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('../info/'));
});
//watch
gulp.task("watch", function(){
gulp.watch("../info//*.scss", gulp.series(["sass"]))
});
//ベンダープレフィックス
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('sass', function() {
return gulp.src('../info/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('../info/'));
});
試したこと
https://teratail.com/questions/205494
こちらの方の質問を参考に、
gulp.task('default', gulp.series('build-server', 'watch-files', function(done){ done(); console.log('Default all task done!'); }));
ここから'build-server'を消してみましたが、結果は変わりませんでした。
補足情報(FW/ツールのバージョンなど)
gulp等のバージョンは以下の通りです。
gulp CLI version: 2.3.0
Local version: Unknown
node.js v14.17.3
npm 6.14.13
質問の仕方が拙かったら申し訳ありません。
補足で必要な情報がありましたらお教え下さい。
ご教授のほどよろしくお願いいたします。
あなたの回答
tips
プレビュー