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

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

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

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

Q&A

0回答

1366閲覧

【gulp】browser-sync ブラウザが立ち上がらない

nacchan3

総合スコア13

gulp

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

0グッド

0クリップ

投稿2021/07/20 01:18

前提・実現したいこと

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

質問の仕方が拙かったら申し訳ありません。
補足で必要な情報がありましたらお教え下さい。

ご教授のほどよろしくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問