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のRESTAPIを使って簡単にスマホアプリを作る方法... Webデザイナーがアプリを作るというと敷居が高いと思われるかもしれません。 実際私も「アプリなんて無理」と少し前まで思っていましたが、先日iOS/Andoroidの両方でアプリを作る事ができました。 ちなみに公開したアプリはほとんどコードを触っていません。 WordPressを少し知ってる...
今更気がついたWordPressのウィジェットの便利さについて... 先日公開したサイトで「俺の嫁が可愛い」というサイトを作ったのですが、その時普段のテーマと作り方と違う作り方をしました。 あまりコードを書かずに、plugin中心で機能を追加したので、Widgetをフル活用しました。 それで、もしかしたらこれがWordPressの適切な使い方なのかなと改めて考え直...
WordPressのテーマをリニューアルした理由... 新年早々このブログのテーマをリニューアルしました。 なんで変えたのかとかそのあたりの考えを伝えたいと思います。 最近のWordPressを知るため このブログはWordPressで構築されています。 以前はWordPressの興味が高かったので進んで、WordPressのテーマを色々...
WordPressのテーマを作る時に気をつけている事... WorsPressのテーマを作れるようになって数年経ってリニューアルとか運用をする中でテーマをこうやって作っておけばよかったなと反省して最近は私が気をつけているテーマ制作のポイントを紹介します。 前提の環境 私はコーディングは得意ですがPHPをガリガリ書けるというわけでは...
第27回WordBench大阪でGitについて話してきた... ご縁あってWordBench大阪で登壇してきました。 第27回WordBench大阪 話した内容はGitについてです。 去年あたりからGitを使い始めていました。 そんな拙い私の経験が生かせて嬉しいです。 資料を作ってみて気づいたこと 色々な方から「人前で話すと勉強にな...
WockerでWordPressの本番環境をローカルに持ってくる方法... Wockerには便利なコマンドがいくつかあって、その中にsqlを取り込んでくれるものがあります。 そういった記事を見つけたのですがバージョンが古いようでしたので自分用に書き直しました。 参考サイト Wocker を使って公開されているサイトをローカルにコピ...