Ringo-Cafe

GulpでPugやSASSでもって、VCCWでWordPressのテーマだけでなくページや記事(post)を書いてみた!

8/16/2019

というわけで、だいぶ前に作ったオリジナルなんですが、もうほとんど使わなくなってるので記事の肥やしにでもできたらと思いまして、紹介します!

メリット


vccwっていうのはvagrantのboxの一つなんですが、vagrantの仮想環境でWordPressの開発ができるスグレモノです。

WordPressの開発って、どうしてもブラウザ上でいろいろしなくちゃいけなかったり、何よりgitでのバージョン管理ができないので、あとあと戻したいとかいう状況になってもなかなか面倒だったりしますよねー。
あとコピーも面倒だし。

ってことで、ローカルの仮想環境で構築できないかと検索したところ、よいのがあったというわけですね。

せっかくなので、タスクランナーのGulpを使って、そのシステムの中でpugやsassでhtmlとcssをコンパイルしながら構築できたら楽だなーと思って、いろいろ改造したりしたっていう感じです。

また本番反映をAll in one migrationというプラグインに頼ることで、ローカル環境がステージング環境となって、まったく同じものを本番にデプロイすることができるようになります。DB自体も書き換えてくれるので、いろいろ考えなくてよくなりました。

ちなみに、Localという仮想環境作れるアプリもあったんですが、そこそこ便利に使える代わりに、自由度が低くて、やりたいことができなかったりが多かったのでやめました。

構成


/gulp-src/
ここにソース系のファイルをまとめてます。

/vccw-env/
Gulpのタスクでgulp-srcフォルダにあるソースファイルをコンパイルして、こちらに書き出します。

vccw-envフォルダの中は
/vccw-env/wordpress/というフォルダの配下が全部wordpressの構成になっており、vagrant upすると、仮想のcentosに同期される仕組みです。

また、 /vccw-env/gulp-dist-pages/というフォルダを作り、その中にはpageやpostなど、通常であれば、ブラウザ上でコピペしないといけない系のデータを書き出しています。

ともあれコード


コードはこんな感じです。
ちょっと回りくどいとか、無駄なこともしているかもしれない!💦

// gulpfile vccw用
const
  gulp = require("gulp"),
  sass = require("gulp-sass"),
  browser = require("browser-sync"),
  pug = require("gulp-pug"),
  autoprefixer = require("gulp-autoprefixer"),
  rename = require("gulp-rename"),
  plumber = require("gulp-plumber"),
  uglify = require("gulp-uglify"),
  pleeease = require("gulp-pleeease"),
  imagemin = require("gulp-imagemin"),
  pngquant = require("imagemin-pngquant"),
  mozjpeg = require("imagemin-mozjpeg"),
  changed = require("gulp-changed"),
  notify = require("gulp-notify"),
  sourcemaps = require("gulp-sourcemaps"),
  clean_css = require("gulp-clean-css"),
  pugPhpFilter = require("pug-php-filter");

const
  srcDir = "src/",
  dstDir = "../vccw-env/wordpress/wp-content/themes/my-theme/",
  dstDirPages = "../vccw-env/gulp-dist-pages/";

const
  pugPhpOption = {
    pretty: true,
    basedir: srcDir,
    filters: {
      php: pugPhpFilter
    },
  }

gulp.task("server", function () {
  return browser.init({
    port: 3000,
    // server: {
    //   baseDir: dstDir
    // },
    proxy: "mp-site.test",
  });
});

// SASSをCSSに変換。autoprefixer。min化。ソースマップ作成。
gulp.task("sass", function () {
  gulp.src([srcDir + "sass/**/*.scss", srcDir + "sass/**/*.sass"])
    .pipe(plumber({errorHandler: notify.onError("sassがエラーだよ!!\n<%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(pleeease({
      "minifier": false,
      "autoprefixer": false,
      "mqpacker": true,
    }))
    .pipe(autoprefixer({
      browsers: ["last 2 version", "iOS >= 10", "Android >= 5.0"],
      cascade: false,
      grid: true,
    }))
    .pipe(clean_css())
    .pipe(rename({ suffix: ".min" }))
    .pipe(sourcemaps.write("./maps/"))
    .pipe(gulp.dest(dstDir + "css/"))
    .pipe(browser.reload({stream: true}))
});

// JSの変換。min化。ソースマップ作成。
gulp.task("js", function () {
  gulp.src([srcDir + "js/**/*.js", "!" + srcDir + "js/**/*.min.js"])
    .pipe(plumber({errorHandler: notify.onError("jsがエラーだよ!!\n<%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(rename({ suffix: ".min" }))
    .pipe(sourcemaps.write("./maps/"))
    .pipe(gulp.dest(dstDir + "js/"))
    .pipe(browser.reload({ stream: true }))
});

// 1個ずつ、変更のあったファイルだけPUGするよ
gulp.task("pug", function(){
  return gulp.src([srcDir + "**/*.pug", "!" + srcDir + "**/_*.pug"])
    .pipe(plumber({errorHandler: notify.onError("pugがエラーだよ!!\n<%= error.message %>")}))
    .pipe(changed(dstDir, { extension: ".php" }))
    .pipe(pug(pugPhpOption))
    .pipe(rename({extname: ".php"}))
    .pipe(gulp.dest(dstDir))
    .pipe(browser.reload({ stream: true}))
})

// 全部PUGするよ!
gulp.task("pug-all", function () {
  return gulp.src([srcDir + "**/*.pug", "!" + srcDir + "**/_*.pug"])
    .pipe(plumber({errorHandler: notify.onError("pug-allがエラーだよ!!\n<%= error.message %>")}))
    .pipe(pug(pugPhpOption))
    .pipe(rename({extname: ".php"}))
    .pipe(gulp.dest(dstDir))
    .pipe(browser.reload({ stream: true}))//ファイル数が多いときはコメントアウトするとよい
});

// 固定ページ用のpugを作るよ
gulp.task("pug-pages", function () {
  return gulp.src([srcDir + "**/_page-*.pug"])
    .pipe(plumber({ errorHandler: notify.onError("pug-pagesがエラーだよ!!\n<%= error.message %>") }))
    .pipe(changed(dstDirPages, { extension: ".html" }))
    .pipe(pug(pugPhpOption))
    .pipe(gulp.dest(dstDirPages))
});
// 固定ページ用のpug-alllllllllll
gulp.task("pug-pages-all", function(){
  return gulp.src([srcDir + "**/_page-*.pug"])
    .pipe(plumber({errorHandler: notify.onError("pug-pagesがエラーだよ!!\n<%= error.message %>")}))
    .pipe(pug(pugPhpOption))
    .pipe(gulp.dest(dstDirPages))
});

// 画像のロスレス圧縮するよ!
gulp.task("img-min", function () {
  gulp.src(srcDir + "img/**/*.svg")
    .pipe(changed(dstDir + "img/"))
    .pipe(gulp.dest(dstDir + "img/"))
  return gulp.src(srcDir + "img/**/*.{png,jpg,gif}")
    .pipe(changed(dstDir + "img/"))
    .pipe(imagemin([
      pngquant({ quality: [.7,.85], speed: 1, floyd: 0 }),
      mozjpeg({ quality: 80, progressive: true }),
      imagemin.svgo(),
      imagemin.optipng(),
      imagemin.gifsicle()
    ]))
    .pipe(gulp.dest(dstDir + "img/"))
});

// ファイルをそのままdestするよ!
gulp.task("files", function(){
  gulp.src([srcDir + "files/**/*", srcDir + "**/.htaccess"], {dot: true})
    .pipe(changed(dstDir + "files/"))
    .pipe(gulp.dest(dstDir + "files/"))
  // gulp.src(srcDir + "**/.htaccess", { dot: true })
  //   .pipe(changed("../vccw-env/wordpress/"))
  //   .pipe(gulp.dest("../vccw-env/wordpress/"))
});

// wp-基本設定
gulp.task("wp-settings", function(){
  gulp.src(srcDir + "wp-style.css")
    .pipe(rename({basename: "style"}))
    .pipe(gulp.dest(dstDir))
  gulp.src(srcDir + "screenshot.png")
    .pipe(imagemin([
      pngquant({quality: "65-80", speed: 1, floyd: 0}),
      mozjpeg({quality: 80, progressive: true}),
      imagemin.svgo(),
      imagemin.optipng(),
      imagemin.gifsicle()
    ]))
    .pipe(gulp.dest(dstDir))
});

// wp-php すべてのphpファイルはそのままコピーするよ
gulp.task("wp-php", function(){
  gulp.src(srcDir + "**/*.php")
    .pipe(changed(dstDir + "**/*.php"))
    .pipe(gulp.dest(dstDir))
});

// デフォルトタスク+watchタスク
gulp.task("default", [
    'server', 'files', "img-min",
    //'pug-all',
    'pug-pages', 'sass', 'js', 'wp-php'
  ], function () {
  gulp.watch(srcDir + 'files/**/*', ["files"]);
  gulp.watch(srcDir + "img/**/*.{png,jpg,gif,svg}", ["img-min"]);
  gulp.watch(srcDir + "**/*.pug", ["pug"]);
  // gulp.watch(srcDir + "**/_*.pug", ["pug-all"]);
  gulp.watch(srcDir + "**/_page-*.pug", ["pug-pages"]);
  gulp.watch([srcDir + "sass/**/*.scss", srcDir + "sass/**/*.sass"], ["sass"]);
  gulp.watch([srcDir + "js/**/*.js", "!" + srcDir + "js/**/*.min.js"], ["js"]);
  gulp.watch(srcDir + "**/*.php", ["wp-php"]);
});


あと若干書き方がバージョン古い箇所もありますね!
適宜書き換えないといけないかもしれない!
gulpも3.9.1バージョンですしね。

とりあえず不明な箇所は @ringo_deveまでご連絡いただければ~。

まとめ


この方法でやることによって、完全にWordPressを支配できます。

そして、プラグインやライブラリのいいとこだけ持っていくことができます。

また、受託の開発でも力を発揮します。
開発スピードが倍くらい早くなります。
WordPressでの開発案件まだまだ多いですもんね・・・(遠い目。

ぜひ楽しんでください~。

トップへ戻る