ウェブカツ学習メモ　gulpでv3からv4へ書き換えをやってみました

こんにちは。製造業の会社でWEBディレクターをしています。
ウェブカツを始めて1年が経ちました。他の生徒と比べれば、
かなり遅い進捗だとは思います。
勉強時間は合計で372.5h、日数は206日です。

今やっと….
javascript・jQuery部 上級
きました。javascript・jQuery部 上級。
正直今までのレッスンは十分に理解していないですし、
ポートフォリオもまだまだこれからです。
でもここまできました。

Lesson09「bacbone.jsの基本の機能と書き方〜ViewとModelの連携前編〜」
はまりました。さすが上級、いや上級じゃなくても
ずっとはまりっぱなしでしたけれどね。

レッスン動画を見て、コードを写しgulpを使う段階になりました。
javascript・jQuery部 中級でやったこともかなり忘れていて、
npm？、gulp？何が違うんだっけ？というレベルですが、
とりあえずpackage.jsonをディレクトリにコピーしてきて、
ターミナルを起動して、
npm install
うんうん、インストールできた。package.json便利です。そして、
gulp
これで環境構築完了〜となる予定だったのですが
ReferenceError: primordials is not defined

いやいや、レッスンで提供しているpackage.jsonと
gulpfile.jsなんだから、間違ってないでしょ。おかしいでしょ。
レッスンの質問欄を見た所、同じエラーが出ている方がいました。
先輩ありがとう。これで解決。

しかし、そうはいきませんでした。
質問に対する答えは、エラーの原因をおおまかに説明しつつ、
「上級まで来たのですから、自分で解決する努力をしましょう」
本当すみません。いつも楽をして解決しようとしていた自分が恥ずかしいです。
このあたりが他のプログラミングスクールと違うところだと思います。
解決方法を教えるのはきっと簡単だと思いますが、現場ではなんでも質問できるわけではありませんよね。エンジニアに限ったことではないですが、
ググれば分かることを人に聞いていたら「使えない」認定されます。

エラーの原因ですが、node.jsとgulpのバージョンの組み合わせがよくないということのようでした。解決の方針は2つです。

1. gulpのバージョンを上げる
2. node.jsのバージョンを下げる

1は最新のバージョンを使うやり方ですが、gulpfile.jsの書き換えが発生します。
大変な道ではあるのですが、こちらをチャレンジしてみることにしました。

「gulp4 gulp3 書き換え」などで検索をしました。
いろいろな記事がヒットして、それを参考に少しずつコードを修正していきます。
個人的には公式のドキュメント、以下URLあたりがお気に入りです。
https://gulpjs.com/docs/en/api/task
https://gulpjs.com/docs/en/api/watch
https://gulpjs.com/docs/en/api/dest
英語で分かりにくい部分が多いですが、なんといっても公式。
サンプルのコードは絶対に間違っていないという安心感があります。
個人の方の記事は日本語ですが、その方の環境、
その方のgulpfile.jsです。どの部分を参考にしたらよいのか、
公式の書き方と差異があるけれど間違いではないのか。そのあたりに不安を感じました。
間違える要素が少しでもあるものを参照するのは怖いです。

いくつもエラーが出て、エラーが出るたびに検索、修正を繰り返しました。
そして最後に残ったのが、
Received a non-Vinyl object in dest()
destにVinylじゃない形式のオブジェクトで受け取ったよ
という感じでしょうか…

これがなかなか解決しませんでした。
エラーメッセージで検索しても日本語の記事がなく、
英語のQ&Aのようなサイトだけです。
「Vinyl」「dest」このあたりのキーワードでも検索しました。
でも結局分からず。検索結果が、前に訪問したページばかりになってきました。
このあたりでだいたい4時間。Macたたきたくなります。

いったん休んで次の日、ふと想定する原因が間違っているのではと思いました。
今まではgulpのバージョンが上がる、だからgulpfile.jsの更新が必要。
という視野でしか調べていませんでした。なので、見ていたのは完成したサンプルコードがあるページばかりです。

一度訪問した以下URLのページで、気になる記述がありました。
https://github.com/gulpjs/vinyl-fs/issues/288
「vinyl-fs 3 is a major, breaking version.Plugins will need to be updated to use a version of Vinyl that supports isVinyl()」
今回のエラーと直接関係はないのですが、
「プラグインはisVinyl()をサポートしているバージョンにアップデートする必要があるよ」という感じでしょうか。
この一文を見て、
“vinyl-source-stream”: “^1.1.0”
これアップデートしてみるかと思いつきました。
最新バージョンの2.0.0にしたところ、無事bundle.jsに値が入りました。

長かった…途中諦めて質問欄に投稿しようかと思いましたが、なんとか自力で解決できました。エラー解消まではつらかったですが、明確な正解のないところからエラーを解消できたことは大きな自信になりました。
それから解決までに調べたページから
・npmってなに
・gulpってなに
・package.jsonってなに
・gulpfile.jsってなに
のような基本的なことが感覚的に理解できました。
もちろんレッスンでは聞いているのですが、やはり手を動かさないと
身になっていない表面的な知識なんですよね。

最後に修正したコードを載せておきます。今同じレッスンをやっているという方は、
見ない方がよいかもれしれないです。
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

//gulpfile.js v4書き換え後
   //plug-in
   var { watch, task, src, dest, series } = require('gulp');
   var gulp = require('gulp');
   var browserify = require('browserify');
   var browserSync = require('browser-sync').create();
   var source = require('vinyl-source-stream');
// gulpタスクの作成
   task('build', function(){
     browserify({
       entries: ['src/app.js'] // ビルド元のファイルを指定
     }).bundle()
       .pipe(source('bundle.js')) // 出力ファイル名を指定
       .pipe(dest('dist/')); // 出力ディレクトリを指定
   });
task('browser-sync', function() {
     browserSync.init({
       server: {
         baseDir: "./", // 対象ディレクトリ
         index: "index.html" //indexファイル名
       }
     });
   });
task('bs-reload', function () {
     browserSync.reload();
   });
// Gulpを使ったファイルの監視
   task('default', series('build', 'browser-sync'), function(){
     watch('./src/.js', task('build'));     watch("./.html", task('bs-reload'));
     watch("./dist/*.+(js|css)", task('bs-reload'));
   });

長文読んでいただいてありがとうございました。