PHP、JS、Sass 編集でブラウザを自動更新しつつ CSS、JS を min 化して幸せになっときたい諸氏へ

大概の 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

後はノリ。