2020-07-16に更新

Gulpの使い方をメンティさんに教えるその１

（ここまでの流れあとでまとめときます）

gulpfile.jsを作ってみよう

今日のカリキュラムはこちら

htmlをsrcフォルダからdistフォルダにコピーしよう！
pugをコンパイルしよう！
ホットリロードを導入しよう！

３については余裕が残ってればという感じ。

基本形

これが基本形

const
  gulp = require("gulp")

function pugCompile(){
  return gulp
    .src()
    .pipe()
}

完成形

完成形（関数部分だけ）

function pugCompile(){
  return gulp
    .src([srcDir + "**/*.pug", "!" + srcDir + "**/_*.pug"], {
      since: gulp.lastRun(pug)
    })
    .pipe(plumber({errorHandler: notify.onError("pugがエラーだよ！！\n<%= error.message %>")}))
    .pipe(pug(pugOption))
    .pipe(gulp.dest(dstDir))
    .pipe(browser.reload({ stream: true}))
}

gulpfile.jsの基礎説明

基本形について、何をしているかというと、

const
  gulp = require("gulp")

ここで宣言して、package.jsonでインストールしたgulpというライブラリを使用しますよー、使うときはgulpという名前で使いますよーとしています。

また、下を見ると

function pugCompile(){
  return gulp
    .src()
    .pipe()
}

となっています。
関数名はなんでもいいです。そのままpugまで教える魂胆です。
return gulp で、先ほど宣言した変数名を呼び出します。

また、その後の行は「.」でつながっているメソッドチェーンですね。
src() でソースとなるファイルを指定しています。
.pipe() はそのまんま。何かをパイプします。この中に、gulpのプラグインなんかを指定していきます。

ここで完成形を見ると
１つの src() と４つの pipe() がつながってますね。

それぞれ、

pipe１個め：エラーがあっても終了しない。エラーメッセージも吐く。
２個め：pugに変換
３個め：distフォルダに出力
４個目：ホットリロード

という意味になります。

これがgulpfile.jsの基本的な説明です。

1. htmlをsrcフォルダからdistフォルダにコピーしよう！

srcフォルダを作ります。
その中にindex.htmlを作ります。

<html>
  <head>
  </head>
  <body>
    <p>テスト</p>
  </body>
</html>

↑最低限これくらい入れておけば表示して出てる確認ができるのでこんなのを入れて保存しときます。

gulpfileのsrcメソッドにそのフォルダ、ファイルを指定します。

pipeメソッドの引数にdestを指定し、distに出力させます。

function pugCompile(){
  return gulp
    .src("src/index.html")
    .pipe(gulp.dest("dist/"))
}

gulp.task('pug', pugCompile)

最後にタスクも指定。

これでターミナルでnpx gulp pugで動くはず。

2.pugをコンパイルしよう！

次にpugをコンパイルしていくよ。

前回までのコード↓

const
  gulp = require("gulp")

function pugCompile(){
  return gulp
    .src("src/index.html")
    .pipe(gulp.dest("dist/"))
}

gulp.task('pug', pugCompile)

srcとpipe(dest)の間にpipe(pug)メソッドを入れていきます。

pugメソッドのインストール

npm i -S gulp-pug ←ターミナルでこれ。

package.jsonを見ると追加されてるのが確認できる。

constで宣言する

const でgulpの下にpugを追加

const
  gulp = require("gulp")
  pug = require("gulp-pug") // これ追加

宣言したpugを実行する（オプションもつける）

関数の中に、pipeを1個増やし、
引数にpugを入力。
オプションは2個
1個がprettyこれは、falseにすると出力されたHTMLがミニファイされて出てくる。試してみて。

2つめはbasedir。これは入れておくと便利なやつ。includeとかしたときに便利。

あ、あとsrcで指定しているファイルを別のにしましょう。
pug-test.pugという名前にして、指定も.src("src/pug-test.pug")に変更。

function pugCompile(){
  return gulp
    .src("src/pug-test.pug")
    .pipe(pug({
      pretty: true,
      basedir: "src/",
    }))
    .pipe(gulp.dest("dist/"))
}

pug-test.pugの中身は

p テスト

で保存しておく。

実行

以上の変更をあわせるとこう。

const
  gulp = require("gulp")
  pug = require("gulp-pug")

function pugCompile(){
  return gulp
    .src("src/pug-test.pug")
    .pipe(pug({
      pretty: true,
      basedir: "src/",
    }))
    .pipe(gulp.dest("dist/"))
}
gulp.task('pug', pugCompile)

その後、さっきと同様 npx gulp pugってやると
distフォルダの中に、pug-test.htmlというファイルができてますか？

中身は

<p>テスト</p>

こうなってたら成功。
ファイル名の拡張子もpugからhtmlに変わってるのを確認。

ソースファイルのワイルドカード化

ソースファイルをこれまでは1個1個指定してきたのだけれど、
ソースフォルダsrc/の中にあるpugファイルはすべてサブディレクトリも含めて対象にするっていうことをします。

.src("src/pug-test.pug")
これまで↑こうなってた箇所を
.src("src/**/*.pug")
こうします。

/**/の箇所はサブディレクトリも全部含むという意味。
*.pugはpugという拡張子はすべてという意味。

これで、srcフォルダの中にあるpugファイルはすべて対象になりました。

3. ホットリロードを導入しよう！（ついでにplumberも一緒に）

さて、今日は最後にホットリロードを導入していきます。

ホットリロードとは？
ファイルを保存したら、変更がブラウザに反映される。っていうやつ。

やっていきましょう。

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

ターミナルでnpm i -S browser-syncを実行するとインストールされます。
（例によってpackage.jsonが変わってると思います。）

ついでにここでエラー時にタスクが落ちない便利なやつplumberも入れておきましょう。
npm i -S gulp-plumber
npm i -S gulp-plumber gulp-notify

※ちなみにこうやって複数インストールするときは
npm i -S browser-sync gulp-plumber gulp-notifyってつなげて書くこともできます。

constで宣言

さっきと同様、最初のconstに加える

const
  gulp = require("gulp")
  pug = require("gulp-pug")
  browser = require("browser-sync") // これ追加
  plumber = require("gulp-plumber") // ついでにこれも追加
  notify = require("gulp-notify") // あとこれも追加

関数を一個追加する

constのあとにでも入れておいてください。

function server(){
  return browser
    .init({
      port: 3000,
      server: {
        baseDir: "dist/",
        index: 'index.html',
      },
      reloadOnRestart: true,
    })
}

portは3000とか8080が多いですね。
あとの設定はレベル上がったらまたでよいかと。

pugの設定に追加

.pipe(browser.reload({ stream: true}))　これをdestの次の行に追加。

function pugCompile(){
  return gulp
    .src("src/**/*.pug")
    .pipe(pug({
      pretty: true,
      basedir: "src/",
    }))
    .pipe(gulp.dest("dist/"))
    .pipe(browser.reload({ stream: true})) //ココに追加
}

ついでにplumber

function pugCompile(){
  return gulp
    .src("src/**/*.pug")
    .pipe(plumber({ errorHandler: notify.onError("sassがエラーだぞ豚野郎！！\n<%= error.message %>") })) // plumberはココ追加
    .pipe(pug({
      pretty: true,
      basedir: "src/",
    }))
    .pipe(gulp.dest("dist/"))
    .pipe(browser.reload({ stream: true}))
}

コメントは自由にどうぞです。。

watchとdefaultタスクを入れる

ここで2つのタスクを追加します。

defaultタスクは、npx gulpで立ち上げたときに、同時に実行されるタスク。
watchタスクは、立ち上げたのちに監視対象のファイルが更新されたら、設定したタスクを実行するタスク。

というわけで書き方。

これまで書いたfunction pugCompileのあとに、

// watchタスク
function watchFiles(){
  gulp.watch("src/**/*.pug").on('change', gulp.series(pugCompile))
}

// defaultタスク
gulp.task("default", gulp.series(
  gulp.parallel(
    pugCompile
  ),
  gulp.parallel(server, watchFiles)
))

を入れます。

これは何かというと
watchのほうは、例のワイルドカードをつけたpugファイルを監視していて、変更があればpugCompile関数を実行します。

defaultのほうは、最初にpugを動かすのと、ついでにホットリロードを動かしてます。

まとめると

そしてこれらのをまとめるとこうなりますかね。

const
  gulp = require("gulp")
  pug = require("gulp-pug")
  browser = require("browser-sync")
  plumber = require("gulp-plumber")
  notify = require("gulp-notify")

// ホットリロードの設定
function server(){
  return browser
    .init({
      port: 3000,
      server: {
        baseDir: "dist/",
        index: 'index.html',
      },
      reloadOnRestart: true,
    })
}

// pugの設定
function pugCompile(){
  return gulp
    .src("src/**/*.pug")
    .pipe(plumber({ errorHandler: notify.onError("sassがエラーだぞ豚野郎！！\n<%= error.message %>") }))
    .pipe(pug({
      pretty: true,
      basedir: "src/",
    }))
    .pipe(gulp.dest("dist/"))
    .pipe(browser.reload({ stream: true}))
}

// watchタスク
function watchFiles(){
  gulp.watch("src/**/*.pug").on('change', gulp.series(pugCompile))
}

// defaultタスク
gulp.task("default", gulp.series(
  gulp.parallel(
    pugCompile
  ),
  gulp.parallel(server, watchFiles)
))

gulp.task('pug', pugCompile)