こんにちは。製造業の会社で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つです。
- gulpのバージョンを上げる
- 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'));
});長文読んでいただいてありがとうございました。
