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

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

ただいまの
回答率

90.34%

gulpfile.jsの書き方。gulp4でbrowser-syncが動きません

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 435

books

score 12

gulp4でbrowser-syncが動きません

他の言語含めて、javaScript初心者です。
参考サイトより寄せ集め、コピペで作ったgulpfile.jsです。

現在の状態について

htdocs内のhtmlファイルを更新しても、browser-syncにより更新されません。
前半のCSSの書き出しは正常に動きます。

browser-syncは立ち上がり、サイトが表示されます。
その状態で更新をしても、変更されません。

$ npx gulp
[12:59:07] Using gulpfile ~/Documents/project/p1/gulpfile.js
[12:59:07] Starting 'default'...
[12:59:07] Starting 'watch'...
[12:59:07] Starting 'browser-sync'...
watch start *********
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.3.2:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Serving files from: htdocs

やりたいこと

1

wacthにて、htmlの更新によりbrowser-syncを動作させたいです。

2 CSS更新後にもリロードしたい

のですが、下記をCSS書き出し後に追加するとSyntaxErrorになります・・・
.pipe(browserSync.reload());
ご助言お願いいたします。

3 追伸で:ヒント頂ければ助かります・・・

独学で勉強中なのですが、例えばdefaultタスクの
console.log('point1 #############')
などはコンソールに表示されません。
通常のjavaScriptではブラウザコンソールに出るかと思います。
なぜなのか、、理解できていません。
参考になるサイト等ありましたらご助言頂けたら幸いです。

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
const autoprefixer = require( 'gulp-autoprefixer' );
const plumber = require( 'gulp-plumber' );

//★★★ブラウザリロード
const browserSync =require('browser-sync');




// デフォルト
gulp.task('watch',  () =>  {
console.log('watch start *********')
  // ★ style.scssファイルを監視
  return gulp.watch('htdocs/css/*.scss', function () {
    // style.scssの更新があった場合の処理

    // style.scssファイルを取得
    return gulp.src('htdocs/css/*.scss')
      // Sassのコンパイルを実行
        .pipe( plumber() ) // 4
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassのコンパイルエラーを表示
      // (これがないと自動的に止まってしまう)
      .on('error', sass.logError))

        .pipe( autoprefixer( { // 7
            browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
            cascade: false
        } ) )

      // cssフォルダー以下に保存
      .pipe(gulp.dest('htdocs/css'));


  });



});

// browser-sync
gulp.task('browser-sync', () => {
  browserSync({
    server: {
      baseDir: 'htdocs',
    }
  });
});





// default
gulp.task('default', gulp.parallel('watch', 'browser-sync'), () => {
console.log('point1 #############')
gulp.watch(['htdocs/**'], gulp.task('browserSync.reload', gulp.parallel(console.log('point2 #############'))))

});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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