いまさら始めるgulp!ブログカスタマイズ時のあれこれを自動化して楽する環境の作り方

いまさら始めるgulp!ブログカスタマイズ時のあれこれを自動化して楽する環境の作り方

ブログのカスタマイズに慣れてくると次第に「CSSをminifyしたい」とかいろいろ欲が出てきます

でも、ちょっと凝ったことやろうとすると、「一手間」掛ける必要があるうえに、その「一手間」ってただの「作業」だったりするわけです…

「そんな単純な作業。自動化しちゃいたいよね」って事を思うのは特別なことでも何でも無く、既にタスクランナーというツールが世に出回っています。

そのタスクランナーの中でもよく名前を聞くのが「Grunt」と「gulp」なのですが、「どうせなら新しい物を」ということで、いまさらながら「gulp」を使って作業効率化するための環境構築方法をまとめます。

例えば「gulp」でこんなことができる

僕はgulpを使いはじめるまで、「gulpって名前は聞くけど、なにができるんだかよくわからない…」状態でした。よっひー(@yosiakatsuki)です。

今となってはWordPressテーマのカスタマイズには無くてはならない存在になってきました。gulp。

「なにができる?」って言われると「いろいろできる!!」って答えたくなるのですが、僕は次のような事をgulpで自動化しています。

  • phpやcss、jsファイルを編集したら、自動でブラウザをリロード
  • scssファイルが編集されたらsass・compassのコンパイルを自動実行
  • coffeeスクリプトのコンパイルを自動実行
  • 画像のリサイズ・圧縮を自動化
  • などなど…

よくgulp入門記事を読むとcssやjavascriptの圧縮、cssのベンダープレフィックス付与などいろいろなことが自動化出来ます。

gulpでタスクを作るためにはjavascriptの知識が必要になりますが、ネット上に転がってるコードをコピペするだけでも十分使えたりするので、チャレンジしてみる価値は十分にあると思います。

環境構築も意外と簡単です。

「gulp」環境構築手順

さてそれでは、gulpでいろいろ自動化させるための環境整備を進めていきます。

とりあえずのゴールを設定

まずはgulpの環境構築をするにあたり、どこらへんまで処理を組んでみるのか…ということですが…

今回は、地味にありがたい「ファイルが編集されたらブラウザをリロードさせる」ことを実現することを、とりあえずの環境構築のゴールとしてみます。

ブラウザのオートリロードがあると、わざわざブラウザでF5とかcommand+rとか押す作業から開放されます!

ファイルを保存してエディタからブラウザにアクティブウィンドを移す頃にはもうブラウザでは再読み込みが始まっているので確認作業がめっちゃ楽ですよ!

Node.jsをインストール

Node.jsをインストールsuru

gulpを動かすためにまず「Node.js」をインストールします。

プロジェクトフォルダを作成

まずはテスト用のプロジェクトを作成する

Node.jsがインストールできたらgulpのプロジェクトフォルダを作ります。

とりあえずフォルダの移動が楽なので今回はホームディレクトリ下に「gulp-test」フォルダを作りました。

(設定記述次第ですが)ファイルの監視等は相対パスで動作できるので、プロジェクトフォルダは好きなところに作って大丈夫です。

あとからプロジェクトフォルダを別の場所に移動・コピーしても動かせます。

package.json を作成

gulpのプロジェクトフォルダを作ったら、ターミナルで作成したフォルダに移動します。

$ cd ~/gulp-test

移動ができたら次のコマンドで初期処理します。

$ npm init
プロジェクトの情報を訊かれるけど、とりあえずエンター連打でOK

すると、ターミナル上でいろいろと訊かれ始めます。面倒ならとりあえずエンター連打でOKです。

最後に「Is this ok? (yes)」と訊かれるので、「yes」と打ち込みます

ここまで来ると、プロジェクトフォルダ内に「package.json」というファイルが出来たと思います。

package.jsonファイルが出来上がる

とりあえず「name」だけ真面目に入力して、後は全部エンターですっ飛ばして作った「package.json」が次のような中身になってます。

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ここまでできたら続いてgulpをインストールします。

gulpをインストール

まずはgulpのドキュメントに従い、「gulp-cli」をグローバルにインストールします。

$ npm install gulp-cli -g

続いて、次のコマンドでgulpを現在のプロジェクトにインストールしていきます。

$ npm install gulp --save-dev

パッケージのインストールではnpm installのオプションでグローバルにインストールするか、現在のプロジェクトにインストールするかを選択出来ます。

「–save-dev」オプションで現在のプロジェクト、「-g」オプションでグローバルにインストールできます。

「PC全体で1つのバージョンのプラグインを動かしていくのか、プロジェクト毎に管理するのか…」

という部分が、グローバルへのインストールするのか、現在のプロジェクトへのインストールするのかを判断する大きな理由になると思います。

グローバルにインストールして、後々「バージョンが合わなくて動かなくなった」となると嫌ですので、基本的に「–save-dev」でインストールしていきます。

インストールができたか「gulp -v」か「npm ls gulp –save-dev」で確認してみます。

gulpがインストールできたかバージョンを確認する

バージョンが表示されればOKです!

gulpfile.jsの設定

さて、ここまででgulpを使う準備が整いました!

ここからは自動化する処理の中身を「gulpfile.js」に書いていきます!

gulpfile.js を作成する

まずは下準備として「gulpfile.js」を作り、以下のコードを書いておきます。

var gulp = require('gulp');

とりあえずの下ごしらえは完了です。

(jsファイルなので文字コードはUTF-8で作成します。もしよくわからなければ「package.json」をコピー&リネームして、中身をごっそり消したファイルに上のコードを書いて使って下さい)

プラグインのインストール

続いて、gulpで動作させるプラグインをインストールしていきます。

gulpをインストールした時と同様にnpmでインストールしていきます。基本形は次のコマンドのような形になります。

$ nam install --save-dev [プラグイン名]

(「–save-dev」はプラグイン名の後でも大丈夫です)

今回は「Browsersync」をインストールします。

$ npm install --save-dev browser-sync

自動ブラウザリロードタスクをつくる!

プラグインがインストールできたら、実際に処理させるタスクを「gulpfile.js」に書いていきます。

gulpfile.jsにプラグインの設定を追加

gulpで動かすタスクを「gulpfile.js」に追記していきます

var gulp = require('gulp');
//以下を追加
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task([タスク名],function(){ [処理の中身] });がgulpでの処理を書く基本形になります。

[タスク名]の部分はターミナルから自分でコマンドを打つ部分になるので、何のタスクか解りやすく、かつ、文字数を短くするとのちのち楽です。

とりあえずこの状態で保存してタスクを実行してみます。

タスクを実行!

それでは、先ほど作ったタスクを実行してみます。

ターミナルで次のコマンドを実行します

$ gulp browser-sync
nodeのネットワークアクセスの許可

ネットワーク関連の警告が出たら許可してあげます。

gulpが実行されたログが表示されます

ターミナル上に、タスクを実行した感じの表示がされて、、、

ブラウザにページが表示されました。

ブラウザにページっぽいものが表示されました。

とりあえず動かしただけなので、ファイルがない旨をお知らせされてます…

ひとまず動きを確認したいので、適当なindex.htmlをつくります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>テスト</p>
</body>
</html>

ファイルができたら、ターミナルにcotrol + cを入力し、タスクを中断させ、再度タスクを実行します。

作成したhtmlが表示されました

ブラウザにindex.htmlの内容が表示されて、右上に「Connected to BrowserSync」と表示されればOKです!

「pタグだけ」のようななんちゃってHTMLを書くと「Connected to BrowserSync」と表示されず、この後設定するファイルの監視も上手く動かないので、一応HTML文書として正しい構造のhtmlファイルを用意して下さい。

ファイルの監視機能を追加

さて、ここまでですと毎回コマンド入力の必要があるので全然「自動化」になっていません!

ファイルの変更を監視して、自動で処理を行うように設定を追記していきます!

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

//以下を追加
//ブラウザのリロード処理
gulp.task('browser-reload', function() {
    browserSync.reload()
});

//watchtask実行時にbrowser-syncも一緒に実行
gulp.task('watchtask',['browser-sync'], function() {
    gulp.watch('./*.html', ['browser-reload'])
});

gulp.watch([ファイル名], [タスク名])で[ファイル名]に変更があった時に[タスク名]を実行できるようになります。

[ファイル名]の部分はワイルドカード指定もできるので、「.htmlファイルに変更があった時」であれば「*.html」、「CSSに変更があった時」であれば「*.css」とすれば、複数のファイルもまとめて監視できます。

タスク名としては「watch」の方がわかりやすいと思いますが、今回はgulp.watchと区別しやすいように「watchtask」という名前にしました。

それではwatchtaskを実行してみます

$ gulp watchtask
追加したタスクが実行されている

browser-syncとwatchtaskが実行されています。

この状態で、index.htmlを変更してみると…

ブラウザをリロードするタスクが実行されました

ファイルの変更があったタイミングで「browser-reload」タスクが実行されます!

これで処理の自動化が出来ました!

デフォルトタスクにする

さらにタスクを簡単に実行できるようにしていきます。

ここまでに作ったタスクですと、実行するときにgulp watchtaskと入力する必要がありました。

これをgulpと入力するだけで実行できるようにします!

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

//ブラウザのリロード処理
gulp.task('browser-reload', function() {
    browserSync.reload()
});

//watchtask実行時にbrowser-syncも一緒に実行
gulp.task('watchtask',['browser-sync'], function() {
    gulp.watch('./*.html', ['browser-reload'])
});

//以下を追加
gulp.task('default', ['watchtask']);

デフォルトタスクにwatchtaskを指定しました。

gulp watchtaskでもそれほど長いコマンドではありませんが、簡単に実行できることに越したことはないので、defaultタスクを作っておくと便利です

リロードするURLを指定する

ブラウザリロードさせるURLをWordPressのローカル環境に変更する

これまで作ってきたタスクだと、プロジェクトフォルダ内のindex.htmlを見ることが出来ましたが、実際にWordPressのカスタマイズをする場合はローカルで動かしているサイトを表示しないと意味がありません。

そういった場合は、browserSync.initでプロキシの設定をしてあげます。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: 'tarahako.local/' //追加
    });
});

//ブラウザのリロード処理
gulp.task('browser-reload', function() {
    browserSync.reload()
});

//watchtask実行時にbrowser-syncも一緒に実行
gulp.task('watchtask',['browser-sync'], function() {
    gulp.watch('./*.html', ['browser-reload'])
});

//以下を追加
gulp.task('default', ['watchtask']);

tarahako.local/VCCWで立てたローカル環境のアドレスですが、ここは自分が使っているローカル環境のアドレスに変えてください。

ちなみに、最後のスラッシュが重要らしいです。(自分は無くてもうまくリロードされましたが、一応付けてます)

まとめ

さて、ここまででひとまずブラウザのリロードを自動化させることを例にgulpの環境を構築してみました。

今後、gulpであれこれ自動化タスクを組んでいくざっくりした流れとしては…

  1. npm initする
  2. gulpをインストールする
  3. gulpのプラグインをインストールする
  4. gulpfile.jsに処理書き足し
  5. 以降「3.」と「4.」の繰り返し

となります。

あとはやりたいことを検索してgulpfile.jsをカキカキして下さい!

今後、自分の環境ログを残す意味でも、開発環境を紹介していきますのでチェックしてみてください。

よっしーのひとこと

よっひー

僕がgulpを使うようになったのはブログ用画像の圧縮とリサイズの自動化のためだったんですよね。

そこら辺も紹介できたらしてみます。(どうやって今のコードが出来たかほとんど忘れた…)

ではまた。