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

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

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

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

Q&A

受付中

gulpでbrowserSyncを使用したら1回しかリロードされない

geotvdesign
geotvdesign

総合スコア0

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

1回答

0グッド

0クリップ

331閲覧

投稿2020/09/21 14:13

前提・実現したいこと

dockerでwordpressをローカルで動かして
gulp、webpackを使用して、開発環境を構築しています。

gulpfile.jsに
・pug、sassのコンパイル
・webpackを利用してJavascriptをバンドル
・watch
という内容を記述し
問題なく動きました。

そこで、
browserSyncを利用して
ブラウザ立ち上げ、自動リロードの機能を追加したところ、
ブラウザが立ち上がりましたが、1回しかリロードしませんでした。

2回目以降もリロードするには
どのようき書き換えればよろしいでしょうか。

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

[18:38:37] Using gulpfile ~/work/local_server/sangyo_local/gulpfile.js [18:38:37] Starting 'default'... [18:38:37] Starting 'cssSass'... [18:38:38] Finished 'cssSass' after 99 ms [18:38:38] Starting 'Pug'... [18:38:38] Finished 'Pug' after 31 ms [18:38:38] Starting 'bundle'... [18:38:38] Version: webpack 4.44.2 Built at: 2020-09-21 18:38:38 Asset Size Chunks Chunk Names bundle.js 999 bytes 0 [emitted] main Entrypoint main = bundle.js [18:38:38] Finished 'bundle' after 581 ms [18:38:38] Starting 'browserSyncTask'... [18:38:38] Starting 'bundle'... [18:38:38] Starting 'watchFiles'... [18:38:38] Finished 'watchFiles' after 197 ms [18:38:38] Version: webpack 4.44.2 Built at: 2020-09-21 18:38:38 Asset Size Chunks Chunk Names bundle.js 999 bytes 0 [emitted] main Entrypoint main = bundle.js [18:38:38] Finished 'bundle' after 241 ms [Browsersync] Proxying: http://localhost:8000 [Browsersync] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.11.5:3000 ------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ------------------------------------- [18:38:52] Starting 'cssSass'... [18:38:52] Finished 'cssSass' after 14 ms [18:38:52] Starting 'bsReload'... [Browsersync] Reloading Browsers...

該当のソースコード

const { src, dest, watch, series, parallel } = require('gulp'); var sass = require('gulp-sass'); var pug = require('gulp-pug'); var rename = require('gulp-rename'); var autoprefixer = require('gulp-autoprefixer'); var plumber = require('gulp-plumber'); const webpackStream = require("webpack-stream"); const webpack = require("webpack"); var browserSync = require('browser-sync') // webpackの設定ファイルの読み込み const webpackConfig = require("./webpack.config"); const Pug = () => { return src('./workspace/pug/**/*.pug') //コンパイル元 .pipe(plumber()) //エラーが起きてもそのまま処理 .pipe(pug({ pretty: true //改行 })) .pipe(rename({ extname: '.php' //PHPファイルとして出力 })) .pipe(dest('./html/wp-content/themes/sangyo/')) //コンパイル先 } const cssSass = () => { return src('./workspace/scss/**/*.scss') //コンパイル元 .pipe(autoprefixer({ //ベンダープレフィックスつける cascade:false //ベンダープレフィックス付きのプロパティのインデントを整形する })) .pipe(plumber()) .pipe(sass({ outputStyle: 'expanded' })) .pipe(dest('./html/wp-content/themes/sangyo/css')) //コンパイル先 } const bundle = () => { // ☆ webpackStreamの第2引数にwebpackを渡す☆ return webpackStream(webpackConfig, webpack) .pipe(dest('./html/wp-content/themes/sangyo/js')) //コンパイル先 } function browserSyncTask() { return browserSync.init({ proxy: 'localhost:8000' }) } function bsReload() { return browserSync.reload() } //ファイル監視 const watchFiles = (done) => { watch('./workspace/scss/**/*.scss', series(cssSass,bsReload)) //watch('監視するファイル',処理) watch('./workspace/pug/**/*.pug', series(Pug,bsReload)) watch('./workspace/js/**/*.js', series(bundle,bsReload)) done(); } exports.default = series(series(cssSass,Pug,bundle), parallel(browserSyncTask,bundle,watchFiles));

試したこと

以下の情報は記述方法が異なり解決には至りませんでした。
https://teratail.com/questions/168814

gulpの書き方は以下を参考にしました。
「コラム:task()メソッドを使う方法は非推奨?」
https://ics.media/entry/3290/

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

package.json

{ "name": "", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "gulp": "gulp", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.26.12", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-plumber": "^1.2.1", "gulp-postcss": "^8.0.0", "gulp-pug": "^4.0.1", "gulp-rename": "^2.0.0", "gulp-sass": "^4.1.0" }, "browserslist": [ "last 2 version", "> 5%", "ie >= 9" ], "dependencies": { "webpack": "^4.44.2", "webpack-stream": "^6.1.0" } }

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

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

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

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

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

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

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

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

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

runnynose

2021/06/13 19:04

修正依頼でも、回答でもないんですが、私もDocker環境でgulpのwatchを試したところ、同じ事象に会いました。クライアントマシン上では問題なく動くのですが。。。

回答1

0

質問者のコードで動きそうだけど、なぜか動かないですね。。。
以下の対応で動きました。

対応内容

watchの引数には直接task処理の関数を渡す

javascript

1 watch('./workspace/scss/**/*.scss', cssSass) //watch('監視するファイル',処理) 2 watch('./workspace/pug/**/*.pug', Pug) 3 watch('./workspace/js/**/*.js', bundle)

各タスクの終了後にreloadを行う

javascript

1 .pipe(dest('./html/wp-content/themes/sangyo/')) //コンパイル先 2 .on('end', ()=> bsReload())

投稿2021/06/16 18:31

runnynose

総合スコア497

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

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

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

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

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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