Gulpを使ってWordPressテーマを作るときにpackage.jsonはWordPress直下に置いた方が良いよという話

私がWebサイト制作のご依頼を受けるとき、基本的にWordPressのオリジナルテーマで構築することがほとんどなのですが、WordPressテーマを作成するときもGulpを使うと便利なのでそうしています。

まだGulpにそこまで慣れていない頃は、テーマの作成をするのにテーマより上位のディレクトリにあるファイルを触ることはないなと思って、テーマと同じ階層にgulpfile.jsとpackage.jsonを置いていて、作っているときは全く問題なかったのですが。

「さあ、完成したよ！ローカル環境からサーバーにFTPでアップロードするよー！」という段階になって、自分のあやまちに気付きました。。。

めっちゃ時間がかかる・・・（泣）

Gulpを使ってコーディングするとnode_modulesが自動生成されますが、テーマの中でGulpを走らせてしまうと、当然node_modulesもテーマの中に出来てしまうのですね。
で、テーマのディレクトリごとひょいっとFTPでアップロードした場合に、このnode_modulesも含まれてしまうので、、、これがやたらと重いんです。
そのせいで、アップロードにバカみたいに時間がかかってしまうのですね。
もちろんファイルをひとつひとつ選択してアップすれば問題ないんですが、ついうっかりそんなことは忘れてひょいっとやってしまうんです。

なので、そんなうっかりさんには、「WordPressのテーマを作る際はテーマの中ではなく、WordPress直下の階層に置くのがオススメ！」というお話でした。

WordPressごとひょいっと上げることもありますけど、その際に直下のnode_modulesの選択を外すのと、わざわざテーマの中に潜って外すのとでは、手間が随分違います。

そんな私が最近担当したプロジェクトで使ったWordPress用のgulpfile.jsの中身はこちら。

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    autoprefixer = require('gulp-autoprefixer'),
    mmq = require('gulp-merge-media-queries'),
    browser = require("browser-sync"),
    plumber = require('gulp-plumber'),
    notify  = require('gulp-notify'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload;

var themeDir = 'wp-content/themes/（テーマ名）';

//sass
gulp.task("sass", function() {
    gulp.src(themeDir + '/sass/**/*.scss')
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({
            style:"expanded",
            compass : false,
            "sourcemap=none": true,
        }))
        .pipe(autoprefixer({browsers: ['last 3 versions','ie >=11','android >=4.4']}))
        .pipe(mmq({
            log: false
          }))
        .pipe(gulp.dest(themeDir + '/css'))
        .pipe(browser.reload({stream:true}));
});

gulp.task('watch', function() {
  browserSync.init({
    files: [themeDir + '/**/*.php'],
    proxy: 'http://localhost:8888/（WordPressのプロジェクト名）/',
  });
  gulp.watch(themeDir + '/sass/**/*.scss',{cwd: './'}, ['sass', reload]);
});

gulp.task('default', ['sass', 'watch']);

これは単純にGulpでSassを使っただけの例になります（改善の余地はあるかもしれませんが）。
もしこのコードをご利用になる場合は、「（テーマ名）」と「（プロジェクト名）」のところをご自身の環境に置き換えてくださいね。

追記：このコードはGulp3の時代に書いたものなので、それ以降のバージョンではうまく動作しません。ご了承ください。