Cntlog > WordPress > WordPressサイト用のgulp/gitで開発環境を作ってみた

WordPressサイト用のgulp/gitで開発環境を作ってみた

先日、WordPress用のこのブログ用にテーマを作ったのですがその時、開発環境も更新してみました。
これまでSCSSくらいしか使っていなかったのですが、最近はgulpも少しずつ使えるようになってきたのでそのあたりの更新です。

githubには上げていて、リポジトリはこちらです。
 

gulpの構成

gulpではSCSSのコンパイル、画像・JSの圧縮、ブラウザシンク、スタイルガイドの作成を行っています。

config(設定ファイル)

////////////
// config
///////////
var themeName = 'theme-name';

//開発用ディレクトリ
var develop = {
    'root': 'wp-content/themes/'+themeName+'/assets/'
}

//コンパイル先
var release = {
    'root': 'wp-content/themes/'+themeName+'/',
    'sass': 'wp-content/themes/'+themeName+'/'
}

SCSSのコンパイル

var sass = require('gulp-sass');
var pleeease = require('gulp-pleeease');
var plumber = require('gulp-plumber');

var AUTOPREFIXER_BROWSERS = [
    // @see https://github.com/ai/browserslist#browsers
    // Major Browsers(主要なブラウザの指定)
    'last 2 version', // (Major Browsersの)最新2バージョン
    // 'Chrome >= 34', // Google Chrome34以上
    // 'Firefox >= 30', // Firefox30以上
    'ie >= 9', // IE9以上
    // 'Edge >= 12', // Edge12以上
    'iOS >= 7', // iOS7以上
    // 'Opera >= 23', // Opera23以上
    // 'Safari >= 7', // Safari7以上

    // Other(Androidなどのマイナーなデバイスの指定)
    'Android >= 4.0' // Android4.0以上
];


// sass
gulp.task('sass', function () {
    console.log('--------- sass task ----------');
    return gulp.src(develop.root + 'scss/**/*.scss')
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err.messageFormatted);
                this.emit('end');
            }
        }))
        .pipe(sass())
        .pipe(pleeease({
            autoprefixer: {"browsers": AUTOPREFIXER_BROWSERS},
            minifier: false
        }))
        .pipe(gulp.dest(release.sass));
});

 画像・JSの圧縮

//画像圧縮
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('image-min', function () {
    console.log('--------- image-min task ----------');
    return gulp.src(develop.root + 'images/**/*.+(jpg|jpeg|png|gif|svg)')
        .pipe(imagemin({
            interlaced: true,
            progressive: true,
            use: [pngquant({quality: '65-80', speed: 1})]
        }))
        .pipe(gulp.dest(release.root));
});
// jsを圧縮
gulp.task('uglify', function () {
    console.log('--------- uglify task ----------');
    return gulp.src(develop.root + '**/*.js')
        .pipe(uglify({preserveComments: 'some'}))
        .pipe(gulp.dest(release.root));
});

ブラウザシンク

//browserSync
var browserSync = require('browser-sync');

// browserSync
gulp.task('browser-sync', function () {
    browserSync({
        //proxy:'192.168.33.10'//ここにwordpressサーバへのIPアドレスを書く
        //proxy:'http://local/'
    });
});

gulp.task('bs-reload', function () {
    console.log('--------- bs-reload task ----------');
    browserSync.reload();
});

スタイルガイドの作成

スタイルガイドはaigisを使っています。

// スタイルガイド
var aigis = require('gulp-aigis');

////////////////////////////////////////////////
// スタイルガイドを生成
////////////////////////////////////////////////
gulp.task('aigis', function() {
    return gulp.src('./aigis/aigis_config.yml')
        .pipe(aigis());
});

.gitと.gitignoreについて

今回gitはドメインのルートから設定しています。

ですので、この構成はテーマの管理のリポジトリの構成と言うよりはWordPressのサイトのバージョン管理を想定して作っています。

普段ならバージョン管理はテーマのディレクトリだけ行っていたのですが、去年ポカをしてサーバー上のデータを全消ししてしまいましてバックアップについて考える機会がありました。
幸いWordPressのデータはバックアップを取っていたのですぐに復旧できたのですが、ブログの記事用に作っていたサンプルの静的ページなどのファイルはバックアップの対象外でしたので復旧できません。
その痛手からバージョン管理は静的ページなどWordPress外のファイルも想定しないといけないと思っています。

また先日こちらの記事(WordPressのテーマをリニューアルした理由)で記載したのですがテーマで書くコードとプラグインとして管理するコードを分ける必要がありますので、これも同時に管理するためにドメインのルートからバージョン管理をするようにしています。

必要なもの、自分が気が付かないものはバージョン管理に含みたくなかったので一旦全部バージョン管理外にして除外設定するような形で.gitiginoreを設定しています。

自分でいうのもあれですが、全然キレイにはかけていないと思います。


# gitignore

*~
*.bak
*.org
Thumbs.db
desktop.ini
/**/.DS_Store
.buildpath
.project
.settings
*.tmproj
build
.idea/*
/node_modules
/styleguide

# WordPress

!google*.html
!wp-content/
!wp-content/themes/
!wp-content/themes/*


# themes
/**/images/*
/**/js/*

!**/assets/
!**/assets/**


# original file

!gulpfile.js
!README.md
!package.json
!/aigis

最後に

去年辺りからは色々経験する機会が増えて、自然と失敗から学べ出来ることも増えました。
自分の最適は年々変わっていくと思うので、「今自分はこうやって作ってる」というのを言葉ではなくコードで人に伝えられたらいいなって思います。

今後のこのリポジトリが更新されるときは私が失敗した時の成長の証になると思いますのでリポジトリで自分も成長を見えるようにしたいです。

人生はバージョン管理できませんが、コードの失敗はバージョン管理していきたい所存です(ゝω・)

関連記事

WordPressのテーマの作るのに簡単・軽量・快適な開発環境をくれたWocker... これまでWordPressの開発環境はVCCWで作っていましたがちょくちょく名前の聞くWockerを今年になってから試してみたら思いの外良くて開発環境を完全に移行しました。 ※別にVCCWが悪いとか言うわけではなくて、私の目的(テーマ開発)にとっては使いやすかっただけです。 Wocker...
Gutenberg(グーテンベルク)対応のオススメできるWordPressテーマの紹介... WordPressが4.9.8から新しいエディターGutenbergをテストするようにダッシュボードから告知が始まりました。 いよいよWordPressが大きく変わる雰囲気をひしひしと感じます。 WordPressといえば、テーマをインストールして有効化することで、サイトのデザインを簡単...
WordPressのテーマを作る時に気をつけている事... WorsPressのテーマを作れるようになって数年経ってリニューアルとか運用をする中でテーマをこうやって作っておけばよかったなと反省して最近は私が気をつけているテーマ制作のポイントを紹介します。 前提の環境 私はコーディングは得意ですがPHPをガリガリ書けるというわけでは...
TOPページのみの条件取得 WordPressを使っていてTOPページのみ判定する条件が見つからなかったので下記のような判定を作りました。 $url_home = home_url() . '/'; //TOPページのURL $page_url_get = home_url() . $_SERVER; //現在のURL...
WordPressのテーマをアップデートさせない方法... CSSでキャンセルする方法 テーマが古いかどうかは、style.cssに記載のあるバージョンでWordPressが判定しています。 ですので、ここの記述を最新版のテーマより上にしてしまえば、アップデートの通知が来ることはなくなります。 基本的に、style.cssの一番上にVersio...
WockerでWordPressの本番環境をローカルに持ってくる方法... Wockerには便利なコマンドがいくつかあって、その中にsqlを取り込んでくれるものがあります。 そういった記事を見つけたのですがバージョンが古いようでしたので自分用に書き直しました。 参考サイト Wocker を使って公開されているサイトをローカルにコピ...