Gulpで作業効率2倍！導入から応用までの手順を総まとめ | アントプロダクション株式会社

Gulpで作業効率2倍！導入から応用までの手順を総まとめ

  • 2021年6月18日
  • WEB制作

    • Gulp導入の記事はいろいろあるんですが、WordPress(動的なサイト)での導入方法の記事が意外になかったので記事にしました。
    Gulpを導入すれば、あなたのコーディング速度が2倍…いや3倍速くなり、帰宅時間を飛躍的に早くしてくれるでしょう！
    例えるなら、レベル200のテトリスくらい！

    ・・・というのは盛りすぎですが

    今回のゴールがこちら
    「WordPressサイトをローカル環境で制作中、コードを保存した段階で自動でSassをコンパイル。さらにブラウザが自動更新して表示確認できる」

    さくっと実装しちゃいましょう！

    まずはGulpの基礎を抑えよう

    Gulpって何？

    GulpとはNode.jsをベースに作られたタスクランナーです。

    実際、何ができるの？

    Web制作において毎回行う様々な作業を「自動化」することができます。
    具体的には、Sassのコンパイル、Jacascriptファイルの圧縮、画像圧縮、ベンタープレフィックス自動付与、リルタイムプレビュー等、ファイルを保存するだけで自動的にタスクとして実行されます。

    さっそくGulpを導入してみよう！

    ①Node.jsをダウンロードする

    まずは、『Node.js』をインストールしましょう。
    Cドライブのユーザーフォルダ直下にインストールしたていで進めていきます！
    Node.jsダウンロードはこちら
    ダウンロードが終わったら、「Node.js command prompt」を開き、「node -v」コマンドでバージョン確認します。

    C:\Users\ユーザー名>node -v

    このようにバージョンが表示されていれば、正常にインストールされています。

    v4.4.7

    ②package.jsonの作成

    Gulp関係のファイルをWordPressの各テーマ直下に作成していきます。
    今回以下のようなディレクトリを想定して説明します。

    Cドライブ
    ? xampp
    ? htdocs
    ? ant-production.jp
    ? wp-content
    ? themes
    ? ant

    コマンドプロンプトで各テーマのディレクトリまで移動してください。

    C:\xampp\htdocs\ant-production.jp\wp-content\themes\ant

    以下のコマンドで、package.jsonを作成します。

    npm init

    以下のような質問が続くので任意の値を入力してください。特に値を設定しないといけないわけではないので、Enterを押していき「name」以外全て空欄でも大丈夫です。あとから変更もできます。

    name: (blogtest) ant-gulp
version:｝」

description:
entry point:
test command:
git repository:
keywords:
author:
license:

・
・
・

Is this ok? (yes)

    以上でpackage.jsonが作成されます。

    ③Gulp.jsをインストール

    次に以下のコマンドでGulpをインストールしましょう。

    npm install gulp --save-dev

    インストールが完了すると、先ほど作成したpackage.jsonにGulpのバージョンが記載されます。

    "devDependencies": {
    "gulp": "^3.8.8"
}

    このように表示されれば成功です！

    ④必要な拡張機能をインストール

    今回は自動でSassのコンパイル、リアルタイムブラウザ更新の２つの拡張機能をインストールしていきます。

    基本的なインストールとアンインストールのコードは以下の通り（○○には拡張機能名が入ります）
    ・インストール

    npm install ○○ --save-dev

    ・アンインストール

    npm uninstall ○○ --save-dev

    Sassコンパイル機能

    npm install gulp-sass --save-dev

    リルタイムブラウザ更新機能

    npm install browser-sync --save-dev

    ⑤gulpfile.jsの作成

    タスクを実行する処理を書くgulpfile.jsを作成していきます。
    「gulpfile.js」という命名でファイルを作成します。
    次に、先ほど追加した「Sassコンパイル」「リアルタイムブラウザ更新」のタスクを以下のように書きましょう。（※ご自身のディレクトリ階層によって調整してください）

    var gulp        = require('gulp'); 　//gulp呼び出し
var browserSync = require('browser-sync'); 　//自動更新プラグイン
var sass        = require('gulp-sass'); 　//Sassコンパイルプラグイン
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

browserSync({
proxy : "l-ant-production.jp" //表示させたいトップドメインを指定
});

gulp.watch("scss/*.scss", ['sass']); //Sassをファイル監視するためにディレクトリ指定
gulp.watch("./*").on('change', browserSync.reload); 　//更新したときに反映させるファイル指定（ex: gulp/*.php →gulpディレクトリ内の全.phpを対象）
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {　//タスクの登録　gulp.task("タスク名".function()
return gulp.src("scss/*.scss") //読み出したいファイルのパターンを指定（Sassの入っているディレクトリ指定）
.pipe(sass())
.pipe(gulp.dest("./css")) //出力先（Sassのコンパイル先のCSSが入っているディレクトリ指定） gulp.dest("出力先")
.pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

    １つ１つ解説していきます。

    var gulp        = require('gulp'); 　//gulp呼び出し
var browserSync = require('browser-sync'); 　//自動更新プラグイン
var sass        = require('gulp-sass'); 　//Sassコンパイルプラグイン

    まずは上部に呼び出したいタスクの種類を記載します。
    「var gulp」はgulpを使う上で必ず記載してください。
    その下に、先ほどインストールした拡張機能のタスクを記載していきます。
    「var browserSync」→リアルタイムブラウザ更新
    「var sass」→Sassコンパイル

        browserSync({
      proxy : "l-ant-production.jp" //表示させたいトップドメインを指定
    });

    WordPressGulpを使用する上で一番のポイントがココ！
    proxyモードとサーバーモードがあるんですが、デフォルトはサーバーモードで、PHPを使うファイルはproxyモードでないと表示されません。

     gulp.watch("scss/*.scss", ['sass']); //Sassをファイル監視するためにディレクトリ指定
    gulp.watch("./*").on('change', browserSync.reload); 　//更新したときに反映させるファイル指定（ex: gulp/*.php →gulpディレクトリ内の全.phpを対象）

    Watch対象（ファイル監視対象）のタスクを書きます。
    このタスクにより、ファイル保存時に自動で記載したタスクが実行されます。

    gulp.task('sass', function() {　//タスクの登録　gulp.task("タスク名".function()
    return gulp.src("scss/*.scss") //読み出したいファイルのパターンを指定（Sassの入っているディレクトリ指定）
        .pipe(sass()) //pipe(行いたい処理) 
        .pipe(gulp.dest("./css")) //出力先（Sassのコンパイル先のCSSが入っているディレクトリ指定） gulp.dest("出力先")
        .pipe(browserSync.stream());
});

    pipeはタスクの処理をつなげるという意味です。
    ここでは「Sassのコンパイル→CSSに変換→ブラウザを自動更新する」という処理を書いています。

    gulp.task('default', ['serve']);

    任意のgulp起動のタスク名を指定します。
    「default」にすると「gulp」で起動することができますので、特にこだわりがなければ「default」にしておきましょう。

    ⑦gulpfile.jsを走らせる

    お疲れさまです！
    面倒な設定はここまで、早速gulpを起動させてみましょう。

    ターミナルでgulpfile.jsがあるディレクトリに移動し、設定したタスク名（今回は「gulp」）で起動します。

    C:\xampp\htdocs\ant-production.jp\wp-content\themes\ant>gulp

    以下のようなコードが表示されローカル環境のサイトがブラウザで表示されます。

    [09:30:52] Using gulpfile C:\xampp\htdocs\ant-production.jp\wp-content\themes\ant\gulpfile.js
[09:30:52] Starting 'sass'...
[09:30:52] Finished 'sass' after 166 ms
[09:30:52] Starting 'serve'...
[09:30:53] Finished 'serve' after 368 ms
[09:30:53] Starting 'default'...
[09:30:53] Finished 'default' after 7.33 μs
[BS] Proxying: https://ant-production.co.jp
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://○○
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://○○
 -------------------------------------

    gulpfile.jsのタスクが正常に動作しているか確認しましょう。
    Sassファイルを変更保存すると、ブラウザが自動更新されて変更箇所のCSSが適用されます。
    また、phpファイルを変更保存してもリアルタイムでブラウザが自動更新されると思います。
    ※インクルードファイルで読み込んでいる場合、インクルードファイルを更新しても階層が深いせいか自動更新はされません。
    例）index.phpで「loop-test.php」というファイルをインクルードで読み込み。「loop-test.php」を保存してもindex.php側で自動更新はされない。

    うまく動作しないという方は、gulpfile.jsの記述を見直してください。
    指定しているファイル階層にファイルがない、ファイル名が間違っているなどという事が結構あります。

    今回Gulpを実装したファイル階層も念のため書いておきます。

    Cドライブ
    ? xampp
    ? htdocs
    ? ant-production.jp
    ? wp-content
    ? themes
    ? ant
    ? scss ? test.scss
    ? gulpfile.js
    ? package.json

    カテゴリ一覧

    ピックアップ記事