gulp で PHP + twig + pug + SCSS あたりで快適にコード書きつつ js、css を min 化するそんな素敵ライフを送る方法

UI のプロトタイプとかちゃちゃっと書きたい時に pug で書いてたりはしたんだけど、pug ばっか書いてすっかり中毒になると、もう素の HTML で twig なんて書いてらんない体に。
pug を twig に変換するやつを書いてくれてる人もいて試しちゃみたけど、どうもイマイチ。ふと思った。pug の | 使って twig を pug 側に書いちまえばええんでねぇの。

こげな感じで。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    |{% block meta %}{% endblock %}
    link(href!="{{ siteUrl('css/main.min.css') }}" rel="stylesheet")
    link(href!="{{ siteUrl('fa/css/fontawesome-all.min.css') }}" rel="stylesheet")
    |{% block head %}{% endblock %}
  body
    script(src!="{{ siteUrl('js/jquery.min.js') }}")

for だの if だのも全て | 使って書いちゃえばイケる。快適ライフ過ぎてあっという間に1つアプリを作った。そのうち紹介したりしなかったりするかもしらん。

機嫌が良いので gulpfile.js を公開しようそうしよう。パスはこんな感じを想定。** はディレクトリ階層問わずってこと。

approot
  pug/**/*.pug
  js/**/*.js
  sass/**/*.scss
  **/*.php

上記パスに各コードを格納。こいつらを gulp の watch で監視しつつ、更新されたら下記のディレクトリにごにょごにょしたファイルを入れて browserSync 使ってブラウザ側をリロードする。PHP は当然リロードだけ。

approot
  public
    js/**/*.min.js
    css/**/*.min.css
  views/**/*.twig

gulpfile.js を動かす前にやること。composer と npm が入っていること前提。

composer require "twig/twig:^2.0"

npm に audit 入ってウザい。SElinux とかコレ系マジ死んで欲しい。デフォルトにすんなハゲがっ！！速攻黙らせる。

npm set audit false

各種 npm モジュールを入れる。とりあえず gulp 4 をやる気がいまいちしないので 3 の最後を入れるべし。

npm install gulp@3.9.1 gulp-connect-php gulp-plumber gulp-pug 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,
    configCallback: (type, collection) => {
      collection.env = Object.assign({ WIZ_APP_ENV: 'gulp' }, process.env);
      return collection;
    }
  }, () => {
    browserSync.init({
      proxy: 'localhost:' + conf.phpPort,
      port: conf.port,
      ui: { port: conf.uiPort }
    });
  });
});

gulp.task('php', [ 'server' ], () => {
  gulp.watch([ '**/*.php', '!vendor/**/*.php', '!node_modules/**/*.php', '!views_c/**/*.php' ], () => {
    browserSync.reload();
  });
});

gulp.task('pug', [ 'server' ], () => {
  gulp.watch([ 'pugs/**/*.pug' ], () => {
    pugc().pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('js', [ 'server' ], () => {
  gulp.watch([ 'js/**/*.js' ], () => {
    jsc().pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('scss', [ 'server' ], () => {
  gulp.watch([ 'sass/**/*.scss' ], () => {
    scssc().pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('pugc', () => { pugc(); });
gulp.task('jsc', () => { jsc(); });
gulp.task('scssc', () => { scssc(); });
gulp.task('c', [ 'pugc', 'jsc', 'scssc' ]);
gulp.task('watch', [ 'php', 'pug', 'js', 'scss' ]);
gulp.task('default', [ 'server', 'watch' ]);

function pugc() {
  return gulp.src([ 'pugs/**/*.pug' ])
    .pipe(plumber())
    .pipe(pug({
      pretty: true
    }))
    .pipe(rename({ extname: '.twig' }))
    .pipe(gulp.dest('./views/'))
}

function jsc() {
  return gulp.src('js/**/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(conf.documentRoot + '/js/'));
}

function scssc() {
  return gulp.src('sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest(conf.documentRoot + '/css/'));
}

全てを監視させる場合

gulp

8080 でアクセス。

冗長的な書き方。

gulp php pug js scss

これらを監視が必要なもののみにすると監視が軽くなる。デザインしてる時は

gulp pug scss

こんな感じで、とかね。

min 作ったり twig にしたりコンバートだけしたい場合は

gulp c

その冗長な書き方は

gulp pugc jsc scssc

gulp gulp 書くのが非常にバカバカしいので .zshrc に

alias g='gulp';

と一行入れるともっと快適になれる。

g php js

素敵。これ自分的には必須。C をボリボリ書いてる時とか

alias m='make';

としとかないとイライラする。

むちゃくちゃ叩くコマンドを悠長にタイプし続けれるほど人生は長くない。