LoginSignup
9

More than 5 years have passed since last update.

PHPをcssやjsのプリプロセッサとして使う

Last updated at Posted at 2015-04-19

ちょっとしたjsやcssのビルドにPHPを使ってみてはどうかという話。
アイディア自体は昔からありそうだけど。

gulp-spawn

そのためにうっかりgulpプラグインを書きかけたのですが、gulp-spawnで十分でした。以下はless/*.less.phpをPHPとして実行してからlessでコンパイルしてbuild/ディレクトリに出力する例。

PHPのコードはファイルではなく標準入力から読み込んでいるので、__FILE__が使えなかったり、requireするパスがgulpfile.jsのあるディレクトリからの相対パスになるというところに注意。

gulpfile.js
var gulp = require("gulp");
var less = require("gulp-less");
var spawn = require("gulp-spawn");
var php = function () {
    return spawn({
        cmd: "php",
        filename: function (base, ext) {
            return base + ext.replace(/\.php$/, '');
        }
    });
};


gulp.task("lessphp", function () {
    gulp.src("less/*.less.php")
        .pipe(php())
        .pipe(less())
        .pipe(gulp.dest("build/"));
});
less/app.less.php
<?php $font_size = 18; ?>
#header {
    h1 {
        font-size: <?= $font_size ?>px;
    }
}

みたいな感じでlessの中にPHPを書くことができる。もちろんifやforやrequireを書いても良いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9