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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

gulp

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

Q&A

1回答

3419閲覧

phpファイルを更新して、gulpでブラウザリロードさせたい

sleeeep12

総合スコア36

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

gulp

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

0グッド

0クリップ

投稿2019/07/04 07:03

まず理想の挙動として、

/root
├─ gulpfile.js    
├─ package.json
├─ /node_modules
├─ /src (作業ディレクトリ)
│ └─ /php
│ └─ index.php
│ └─ /page
│ └─ /common
│ └─ header.php
│ └─ footer.php
│ └─ /sass
│ └─ /js
│ └─ /img

└─ /dist (納品フォルダ。ここにsrcフォルダと同じものがコンパイルされる)

このディレクトリ構造にて、gulp起動時に

  1. dist/にてローカルサーバーが立つ。
  2. dist/php/index/phpがブラウザで開く。
  3. src/以下のsassやphpファイルを更新したら、dist/フォルダにコンパイル。
  4. dist/以下のファイルの変更を確認したらブラウザリロード。

(gulp詳しくなく、この流れが適切じゃなかったらすいません..)

▼以下がgulpfileです。

gulp

1const gulp = require('gulp'); 2const browserSync= require('browser-sync'); 3const autoprefixer = require("gulp-autoprefixer"); 4const plumber = require('gulp-plumber'); 5const rename = require('gulp-rename'); 6const ejs = require("gulp-ejs"); 7const sass = require('gulp-sass'); 8const imagemin = require('gulp-imagemin'); 9const pngquant = require('imagemin-pngquant'); 10const cleancss = require('gulp-clean-css'); 11const sourcemaps = require('gulp-sourcemaps'); 12const watch = require( 'gulp-watch' ); 13const webpackStream = require("webpack-stream"); 14const webpack = require("webpack"); 15const webpackConfig = require("./webpack.config"); 16const connect = require('gulp-connect-php'); 17 18const ROOT = './'; 19const SRC = 'src/'; 20const DST = 'dist/'; 21const SRC_SASS = SRC + 'scss/**/*.scss'; 22const SRC_PHP = SRC + 'php/**/*.php'; 23const DST_PHP = DST + 'php/**/*.php'; 24const SRC_PHP_ALL = SRC + '**/**/*.php'; 25const SRC_JS = SRC + 'js/**/*.js'; 26 27 28// PHP 29gulp.task('build-server', function (done) { 30 gulp.src(SRC_PHP) 31 .pipe(gulp.dest('dist/php')) 32 connect.server({ 33 port:3000, 34 base:'dist' 35 },function(){ 36 browserSync.init({ 37 proxy: 'localhost:3000/dist/php' 38 }); 39 }); 40 done(); 41}); 42 43// ブラウザの自動リロード 44gulp.task('bs-reload', function (done){ 45 browserSync.reload(); 46 done(); 47}); 48 49// sass 50gulp.task('sass', function(done){ 51 var option = { 52 outputStyle: 'expanded', 53 }; 54 gulp.src(SRC_SASS) 55 .pipe(plumber({ 56 errorHandler: function (error) { 57 console.log(error.message); 58 this.emit('end'); 59 }})) 60 .pipe(sourcemaps.init()) 61 .pipe(sass(option)) 62 .pipe(autoprefixer()) 63 .pipe(cleancss()) 64 .pipe(sourcemaps.write(ROOT)) // マップファイルを出力するパスを指定します 65 .pipe(gulp.dest('dist/css')) 66 done(); 67}); 68 69// imagemin 70gulp.task('imagemin', function(done){ 71 gulp.src([SRC + '**/**/*.{png,jpg,gif,svg}'], {base: SRC}) 72 .pipe(plumber({ 73 errorHandler: function (error) { 74 console.log(error.message); 75 this.emit('end'); 76 }})) 77 .pipe(imagemin([ 78 pngquant({ 79 quality: '65-80', 80 speed: 1 81 }), 82 imagemin.jpegtran({ 83 quality: 80, 84 progressive: true 85 }), 86 imagemin.svgo(), 87 imagemin.optipng(), 88 imagemin.gifsicle() 89 ])) 90 .pipe(gulp.dest(DST)) 91 done(); 92}); 93 94//watch 95gulp.task('watch',function(){ 96 gulp.watch("**/*.scss", gulp.task('sass')); 97 gulp.watch("dist/**/*.php", gulp.task('bs-reload')); 98 gulp.watch("dist/**/*.css", gulp.task('bs-reload')); 99 gulp.watch("dist/**/*.js", gulp.task('bs-reload')); 100}); 101 102gulp.task('default', gulp.series(gulp.parallel('build-server','sass','imagemin','watch'),function(done){ 103 done(); 104})); 105

このgulpfileの書き方が違っているのか、sassは問題なく動くのですが、phpのみうまくいきません。

具体的な問題としては
・gulp起動時、src/phpファイルはdist/フォルダにコンパイルされて、ブラウザが立ち上がり、cssや画像も反映される。
しかしその後、phpファイルを変更しても、distフォルダにコンパイルされずに、リロードもされない。gulpも反応していない。

と言った具合です。

しかし何が原因なのかわからず困っています。
どこをどう書き直せばよいのでしょうか?よろしくお願いします。

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

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

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

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

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

m.ts10806

2019/07/04 09:35

ほぼ同件では? https://teratail.com/questions/198401 質問を編集すると「アクティブ」に上がってくるので新しい質問を立てるのではなく質問を編集してご対応ください
guest

回答1

0

dist/**/*.phpという風に書いていますが、phpファイルはdistの中にあるのでしょうか?

投稿2019/07/14 09:14

dany

総合スコア73

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問