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

(ここまでの流れあとでまとめときます)

gulpfile.jsを作ってみよう

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

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

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

基本形

これが基本形

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のプラグインなんかを指定していきます。

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

それぞれ、

  • pipe1個め:エラーがあっても終了しない。エラーメッセージも吐く。
  • 2個め:pugに変換
  • 3個め:distフォルダに出力
  • 4個目:ホットリロード

という意味になります。

これが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)

srcpipe(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)

実行

実行コマンドは
ターミナルで
npx gulp でタスク名を指定しないでいきます。
これでローカルサーバーが立ち上がるのと、defaultで設定したタスクが実行されます。

また、逆に今後たくさんタスクが作られたときにnpx gulp pugとするとタスクを指定して実行することも可能です。

どうでしょうか。うまく動きましたか?
これで今日の予定は終わりです。

ツイッターでシェア
みんなに共有、忘れないようにメモ

りんご🍎@エンジニア/個人開発がんばりんご

HTML/CSS📝 #駆け出しエンジニアと繋がりたい JSはちょっとだけ。ブログ書き始めました🍎 擬似クラス調べるの好き💖

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

コメント