Gulpの導入

Gulpのメリット

GulpはNode.jsをベースに作られたタスクランナーである。JavaScriptで記述でき、非同期処理なのでタスクが高速に処理できる。

導入手順

Node.jsをインストール

Gulpを使うためにはNode.jsが必要なので最初にインストールする。ダウンロードは「推奨版」の方を選択する。
https://nodejs.org/ja

コマンドラインでNode.jsのインストールを確認

Windowsの検索バーに「cmd」を入力するとコマンドプロンプトが出現するので、選択して起動する。コマンドラインを起動したら「node -v」と実行し、Nodeのバージョンが表示されていることを確認する。

package.jsonファイルの作成

ウェブサイトのファイル一式が保存されるフォルダー（以下、プロジェクトフォルダーと呼ぶ）を任意の場所に作成し、コマンドラインでその場所に移動する。###の部分はOSのユーザー名を入力する。
（例：「myproject」というフォルダ名を使用する場合）

cd C:¥Users¥###¥myproject

プロジェクトフォルダーに移動した後、以下のコマンドを実行するとpackage.jsonファイルが生成される。

npm init -y

Gulpのインストール

Gulp本体をローカル環境に（プロジェクトフォルダー以下で使えるように）インストールする。
※Gulpのインストールにはオプション指定として––save-dev、もしくは省略形の–Dという指定をするのが一般的。

npm install -D gulp

現在ではGulpはグローバルではなく、ローカルだけにインストールするのが一般的である。環境差異で動作しないなどトラブルのもとになるので、グローバルにインストールしないほうが望ましい。

タスクの作成

必要なモジュールを「npm install -D」コマンドを使って、ローカルにインストールしていく。

  • Gulp本体のgulpモジュール
  • Sassコンパイラ（Dart Sass）のsassモジュール
  • SassモジュールとGulpモジュールを連携するgulp-sassモジュール など
npm install -D gulp sass gulp-sass

タスクを作成するには、プロジェクトファイル直下に「gulpfile.js」というファイルを作成する必要がある。gulpfile.jsファイルでの処理は、JavaScriptで記述する。

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass")(require("sass"));

// style.scssの監視タスクを作成する
gulp.task("default", () => {
  // ★ style.scssファイルを監視
  return gulp.watch("css/style.scss", () => {
    // style.scssの更新があった場合の処理

    // style.scssファイルを取得
    return (
      gulp
        .src("css/style.scss")
        // Sassのコンパイルを実行
        .pipe(
          sass({
            // 出力時のcssファイルのコードの整形方法を指定
            outputStyle: "expanded",
          })
          // Sassのコンパイルエラーを表示
          // (これがないと自動的に止まってしまう)
          .on("error", sass.logError)
        )
        // cssフォルダー以下に保存
        .pipe(gulp.dest("css"))
    );
  });
});
  • require(‘プラグイン名’)： 使用するプラグインを読み込む
  • gulp.task(‘タスク名’, 実行される処理)：タスク名と、実際に行われる処理を記述する。タスク名をdefaultにすると、タスク実行時のタスク名を省略できる。実行処理内にreturnを記述するのを忘れないようにする
  • gulp.src(‘取得するファイル’)：タスクの対象となるファイルを取得する。複数のファイルも指定できる
  • pipe()： 1つひとつの処理をつなげる。例として前述のコードでは、src()で取得したSassファイルをコンパイルし、それをgulp.dest()で書き出している。pipe()メソッドはいくらでもつなげることができるため、連続した複数の処理を実装できる
  • gulp.dest(‘保存先フォルダー’)： 処理を行ったファイルを指定の場所に保存する
  • gulp.watch(‘監視するファイル’, 処理)：「監視するファイル」に変更があった場合、設定された「処理」が実行される

※task()メソッドによるタスク定義は公式が非推奨としている（使えないわけではない）。
代わりに推奨されているのが、タスクごとに関数をつくり、CommonJSのmodule機能を用いる方法である。

// gulpプラグインを読み込みます
const { src, dest, watch } = require("gulp");
// Sassをコンパイルするプラグインを読み込みます
const sass = require("gulp-sass")(require("sass"));

/**
 * Sassをコンパイルするタスクです
 */
const compileSass = () =>
  // style.scssファイルを取得
  src("css/style.scss")
    // Sassのコンパイルを実行
    .pipe(
      // コンパイル後のCSSを展開
      sass({
        outputStyle: "expanded"
      })
    )
    // cssフォルダー以下に保存
    .pipe(dest("css"));

/**
 * Sassファイルを監視し、変更があったらSassを変換します
 */
const watchSassFiles = () => watch("css/style.scss", compileSass);

// npx gulpというコマンドを実行した時、watchSassFilesが実行されるようにします
exports.default = watchSassFiles;

タスクの実行

作成したタスクを実行するには、コマンドラインで「npx gulp」と入力してEnterを押す。
ファイルの監視を終了する場合は、コマンドラインで[Ctrl]と[C]キーを同時に押す。
※ 「npx」はNode.jsに同梱されているコマンドである。

npx gulp

必須・推奨プラグイン（モジュール）

  • gulp：gulp本体のモジュール
  • gulp-ejs：gulp-ejsで開発するためのモジュール
  • gulp-htmlhint：HTML構文チェック
  • gulp-rename：ファイル出力時にファイル名を変える
  • gulp-dart-sass：Dart Sassコンパイラを使用するGulp用のSassプラグイン
  • gulp-sass-glob-use-forward：glob機能を使って@useや@forwardを省略するプラグイン
  • gulp-postcss：CSSを解析しツリー化してJavaScriptで処理を加えるツール。PostCSS用のプラグインであるAutoPrefixerなどを有効にする
  • gulp-autoprefixer：Can I Useを使用して、ブラウザーのベンダープリフィックスを自動付与してくれる
  • gulp-csscomb：CSSのプロパティの記述を整形する
  • gulp-html-beautify：HTML生成後のコードを綺麗にする
  • gulp-plumber：watch時にエラーが出ても止まらないようにするためのプラグイン
  • gulp-notify：タスクが終了した際などにデスクトップ上で通知ができる
  • gulp-sourcemaps：Chromeのデベロッパーツールでcssのエラーや詳細を確認する際、その箇所がコンパイルで書き出されたcssではなく、コンパイル前のsassのどの箇所に該当するか分かるようにする
  • gulp-eslint：JavaScriptのコードの構文を検証する
  • browser-sync：ファイル等の保存時に、ブラウザーを自動でリロードする
  • gulp-imagemin：画像ファイルの最適化を行い、画像の劣化をできるだけ抑えたままファイルの容量を減らすことができる
  • del：指定したファイルを削除する
  • fs：ファイルやディレクトリの操作を行う（JSONファイル操作用）
inserted by FC2 system