大概の FW 使ってると、public 以下が公開用ファイル達のいるドキュメントルートで、その上に PHP のファイルなどが居る的な感じになっているはず。
controllers/*.php
models/*.php
sass/*.scss
js/*.js
public/css/*.min.css
public/js/*.min.js
public/index.php
要するにこんな感じになってんじゃないかと思うわけ。
そいだら、js や scss のディレクトリ配下のファイルいじったら勝手に public 以下に min が作られてリロードされると楽だと思うわけ。
php もいじったら勝手にリロードされたら楽だと思うわけ。
そんな gulpfile.js なわけ。
npm i gulp@3.9.1 gulp-connect-php gulp-plumber gulp-sass gulp-uglify gulp-clean-css gulp-rename browser-sync --save-dev
var conf = { ip: '0.0.0.0', port: 8080, uiPort: 8081, phpPort: 8082, documentRoot: './public' }; var gulp = require('gulp'); var connectPHP = require('gulp-connect-php'); var plumber = require('gulp-plumber'); var pug = require('gulp-pug'); var sass = require('gulp-sass'); var uglify = require('gulp-uglify'); var cleanCSS = require('gulp-clean-css'); var rename = require('gulp-rename'); var browserSync = require('browser-sync').create(); gulp.task('server', () => { connectPHP.server({ port: conf.phpPort, hostname: conf.ip, base: conf.documentRoot, }, () => { browserSync.init({ proxy: 'localhost:' + conf.phpPort, port: conf.port, ui: { port: conf.uiPort } }); }); }); gulp.task('php', [ 'server' ], () => { gulp.watch([ '**/*.php' ], () => { gulp.src([ '**/*.php', '!vendor/**/*.php', '!node_modules/**/*.php' ]) .pipe(plumber()) .pipe(browserSync.reload({ stream: true })); }); }); gulp.task('js', [ 'server' ], () => { gulp.watch([ 'js/**/*.js' ], () => { gulp.src('js/**/*.js') .pipe(plumber()) .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(gulp.dest(conf.documentRoot + '/js/')) .pipe(browserSync.reload({ stream: true })); }); }); gulp.task('scss', [ 'server' ], () => { gulp.watch([ 'sass/**/*.scss' ], () => { gulp.src('sass/**/*.scss') .pipe(plumber()) .pipe(sass({ outputStyle: 'expanded' })) .pipe(cleanCSS()) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest(conf.documentRoot + '/css/')) .pipe(browserSync.reload({ stream: true })); }); }); gulp.task('watch', [ 'php', 'js', 'scss' ]); gulp.task('default', [ 'watch' ]);
gulp ひっぱたいて 8080 にアクセスすると幸せになるわけ。PHP 側から js や css は min を指定しておくと幸せなわけ。
ファイルが増えまくってリロードが遅くなってきたら、いじるファイルタイプだけを監視すれば良いわけ。
gulp php js
後はノリ。
