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

2020-07-16T13:51:22+09:00

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

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を作ります。

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

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というファイルができてますか？

中身は

テスト

こうなってたら成功。
ファイル名の拡張子も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とするとタスクを指定して実行することも可能です。

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

とっさのスピーチ力とか説得力を培うことのできる、A is like Bゲームを作りました

2020-05-25T01:34:59+09:00

とっさに誰かを説得しなければならなくなったり、何かを伝えなくてはいけなくなるような状況って結構ありますよね。
そんな力を培うことのできる練習ができるようなサービスを作りました！

お題をランダムに出題させ、それの回答を書いて、
Twitterにシェアしてみてください！（140文字以内じゃないとツイートできないと思います！）

ゲームはこれです↓↓
A is like B ゲーム

初の #web1week チャレンジです！　完成できてよかった。

このゲームはなに？

とっさの場面、上司やお客さんからの新しい話を聞いたとき、さっと主張しないといけない場面なのに、
何を言えばいいのか思いつかなかったり、考えるのに時間がかかってしまったり。。。
そんなことって、よくありますよね。

この「A is like B ゲーム」は、英語ディベートをやっていた学生の頃、私が先輩に教えてもらった方法です。
「A is like B」、つまり「AはBに似ている」、もしくは「AはまるでBだ」、という主張を、とっさに考えて言葉にする練習ができます。
よく大学への行き帰りの自転車をこぎながら、ぶつぶつとこの練習をしていたことを覚えています。

私が学生時代にやっていた英語ディベートは「パーラメンタリーディベート」といって、
いわゆる長期間文献を調べて臨むディベートとは違い、その日、その場でお題が出題されます。
20分ほどの準備時間で何を主張するのかを準備して臨むのです。

そのため、思考の瞬発力と、豊かな表現力が求められます。
真面目に練習しなかった私はとても弱く全然勝てませんでしたが、練習は楽しかったです。

意外と知られてない方法？

ネットで検索してみると、「A is like B」というワードはおそらくなさそうでしたので、
もしかすると、くだんの先輩が作った練習方法なのかもしれませんが、
この練習は非常に基礎練習として有効だなぁと思っていました。

開発について

今回、 #web1week のお題が「like」ということもあり、
天の邪鬼ワタクシ、シンプルにいいねやスキの意味のlikeではなく、
「～のようだ」「まるで～だ」という前置詞のlikeを採用してみました。

今回は使い慣れたNuxtを利用し、またNetlifyにホスティングしてます。
本当はデータベースと連動させていろいろやりたかったのですが
Firebaseの設定がどうにもうまくできなかったので、こちらも使い慣れているNetlifyにしちゃいました。

今後、まだまだ直したい改修予定としては、
ログインできたり、記録できたり、また時間制限などを追加したいと思っています。

まずはTwitterに投稿できるシステムだけつけてみました。
楽しみながらスピーチの練習や、説得力の向上をしていただけたらと思います。
ありがとうございました。

りんご

A is like B ゲーム

りんご🍎＠エンジニア／個人開発がんばりんごの投稿 - Crieit

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

とっさのスピーチ力とか説得力を培うことのできる、A is like Bゲームを作りました