まず理想の挙動として、
/root
├─ gulpfile.js
├─ package.json
├─ /node_modules
├─ /src (作業ディレクトリ)
│ └─ /php
│ └─ index.php
│ └─ /page
│ └─ /common
│ └─ header.php
│ └─ footer.php
│ └─ /sass
│ └─ /js
│ └─ /img
│
└─ /dist (納品フォルダ。ここにsrcフォルダと同じものがコンパイルされる)
このディレクトリ構造にて、gulp起動時に
- dist/にてローカルサーバーが立つ。
- dist/php/index/phpがブラウザで開く。
- src/以下のsassやphpファイルを更新したら、dist/フォルダにコンパイル。
- 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も反応していない。
と言った具合です。
しかし何が原因なのかわからず困っています。
どこをどう書き直せばよいのでしょうか?よろしくお願いします。