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

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

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

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

解決済

gulpとbrowser-syncを使ってもブラウザが立ち上がりません

makaruon
makaruon

総合スコア5

gulp

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

1回答

0グッド

0クリップ

351閲覧

投稿2019/08/11 04:26

前提・実現したいこと

gulpとbrowser-syncを使ってブラウザの自動更新を行いたいです。

発生している問題・エラーメッセージ

gulpを実行したときは、とくにエラーメッセージは表示されない(以下の結果)のですが、本来ならばローカルホストのURLがここに表示され、ブラウザが自動で立ち上がるはずですが何も起きません。

[13:17:12] Using gulpfile ~\Desktop\project\02_portfolio\html\gulpfile.js [13:17:12] Starting 'default'... [13:17:12] Starting 'sass'... [13:17:12] Finished 'sass' after 180 ms [13:17:12] Starting 'js'... [13:17:12] Finished 'js' after 9.42 ms [13:17:12] Starting 'browser-reload'...

該当のソースコード

const gulp = require('gulp'); const sass = require('gulp-sass'); const notify = require("gulp-notify"); const plumber = require("gulp-plumber"); const autoprefixer = require('gulp-autoprefixer'); const uglify = require('gulp-uglify'); const changed = require('gulp-changed'); const browserSync = require('browser-sync').create(); const cleanCss = require('gulp-clean-css'); const sourcemaps = require('gulp-sourcemaps'); const glob = require('gulp-sass-glob'); const queries = require('gulp-group-css-media-queries'); const imagemin = require('gulp-imagemin'); const pngquant = require('imagemin-pngquant'); const mozjpeg = require('imagemin-mozjpeg'); //setting : paths const paths = { 'allDist': './01_up_file/dist/*', 'scss' : './src/scss/', 'css' : './01_up_file/dist/css/', 'jsSrc' : './src/js/', 'jsDist' : './01_up_file/dist/js/', 'img' : './01_up_file/dist/img/' } //setting : Sass Options const sassOptions = { outputStyle: 'compressed' } //gulpコマンドの省略 const { watch, series, task, src, dest } = require('gulp'); //Sass task('sass', function () { return ( src(paths.scss + '**/*.scss') .pipe(plumber({ errorHandler: notify.onError({ title: "Sassエラー発見!", message: "<%= error.message %>" }) })) .pipe(sourcemaps.init()) .pipe(sass(sassOptions)) .pipe(cleanCss()) .pipe(glob()) .pipe(queries()) .pipe(autoprefixer()) .pipe(sourcemaps.write()) .pipe(changed(paths.allDist)) .pipe(dest(paths.css)) .pipe(browserSync.stream()) ); }); //JS Compress task('js', function () { return ( src(paths.jsSrc + '**/*.js') .pipe(plumber({ errorHandler: notify.onError({ title: "JavaScriptエラー発見!", message: "<%= error.message %>" }) })) .pipe(uglify()) .pipe(dest(paths.jsDist)) ); }); //jpg,png,svg,gif Compress task('imagemin', function () { return ( src(paths.img + '**/*.{jpg,jpeg,png,gif,svg}') .pipe(imagemin( [ pngquant({ quality: '65-80', speed: 1 }), mozjpeg({ quality: 80 }), imagemin.svgo(), imagemin.gifsicle() ] )) .pipe(gulp.dest('img/min')) ); }); //browser auto reload task('server', function() { return ( browserSync.init({ server: { baseDir: './01_up_file/', } }) ); }); task('browser-reload', function () { return ( browserSync.reload() ); }); //watch watch([paths.scss + '**/*.scss'], task('sass')); watch([paths.jsSrc + '**/*.js'], task('js')); watch(['./01_up_file/**/*'], task('browser-reload')); task('default', series('sass', 'js','browser-reload'));

試したこと

公式の通り以下も試してみましたが結果は同じでした。
task('server', function() {

task('browser-sync', function() {

補足情報(FW/ツールのバージョンなど)

package.jsonはこんな感じです。

{
"name": "html",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-changed": "^4.0.0",
"gulp-clean-css": "^4.2.0",
"gulp-group-css-media-queries": "^1.2.2",
"gulp-imagemin": "^6.0.0",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^4.0.2",
"gulp-sass-glob": "^1.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-pngquant": "^8.0.0"
}
}

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

一番下の
task('default', series('sass', 'js','browser-reload'));となっているところを
task('default', series('sass', 'js', 'server', 'browser-reload'));にしてみたら直りませんか?

投稿2019/08/11 09:08

takopo

総合スコア483

makaruon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

makaruon

2019/08/11 21:45

ご回答ありがとうございます!!! 動きました!!!! 本当にありがとうございました!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

gulp

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