先日、WordPress用のこのブログ用にテーマを作ったのですがその時、開発環境も更新してみました。
これまでSCSSくらいしか使っていなかったのですが、最近はgulpも少しずつ使えるようになってきたのでそのあたりの更新です。
githubには上げていて、リポジトリはこちらです。
gulpの構成
gulpではSCSSのコンパイル、画像・JSの圧縮、ブラウザシンク、スタイルガイドの作成を行っています。
config(設定ファイル）
[javascript]
////////////
// 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+’/’
}
[/javascript]
SCSSのコンパイル
[javascript]
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));
});
[/javascript]
画像・JSの圧縮
[javascript]
//画像圧縮
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));
});
[/javascript]
[javascript]
// jsを圧縮
gulp.task(‘uglify’, function () {
console.log(‘——— uglify task ———-‘);
return gulp.src(develop.root + ‘**/*.js’)
.pipe(uglify({preserveComments: ‘some’}))
.pipe(gulp.dest(release.root));
});
[/javascript]
ブラウザシンク
[javascript]
//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();
});
[/javascript]
スタイルガイドの作成
スタイルガイドはaigisを使っています。
[javascript]
// スタイルガイド
var aigis = require(‘gulp-aigis’);
////////////////////////////////////////////////
// スタイルガイドを生成
////////////////////////////////////////////////
gulp.task(‘aigis’, function() {
return gulp.src(‘./aigis/aigis_config.yml’)
.pipe(aigis());
});
[/javascript]
.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
最後に
去年辺りからは色々経験する機会が増えて、自然と失敗から学べ出来ることも増えました。
自分の最適は年々変わっていくと思うので、「今自分はこうやって作ってる」というのを言葉ではなくコードで人に伝えられたらいいなって思います。
今後のこのリポジトリが更新されるときは私が失敗した時の成長の証になると思いますのでリポジトリで自分も成長を見えるようにしたいです。
人生はバージョン管理できませんが、コードの失敗はバージョン管理していきたい所存です(ゝω・)