Gulp実行エラー[ReferenceError: primordials is not defined]を解決した方法

gulpを実行した際に下記エラーに遭遇した。

ReferenceError: primordials is not defined

調べてみると理由は、「node.jsとgulpのバージョンの組み合わせがよくないから実行できないよ」ということ。

改善方法は以下の2つが考えられる。

1.gulpのバージョンを上げる(gulp3=>gulp4)
2.node.jsのバージョンを下げる

1の場合、gulpファイルの書き換えが必要になるが、今後はgulp4が主流になると思うので、1の方法で対応しました。

まずは、グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。

$ npm rm -g gulp
$ npm install -g gulp-cli

次にローカルインストールされているgulp v3を削除して、gulp v4をローカルインストールします。

$ npm uninstall --save-dev gulp
$ npm install --save-dev gulp

インストールが完了したのでpackage.jsonのgulpを4.0.2に書き換えます。

package.json

{
  "name": "backbone_sample02",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "backbone": "^1.3.3",
    "jquery": "^3.2.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "browserify": "^14.5.0",
    "gulp": "^4.0.2",
    "vinyl-source-stream": "^1.1.0"
  }
}

書き換えたら下記のコマンドを実行して、変更を反映させます。

$ npm i

これでgulpのバージョンアップは完了です。

次にgulpfile.jsを編集します。

これが既存のgulpfile.jsの中身です。

gulpfile.js

//plug-in
var gulp = require('gulp');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
var source = require('vinyl-source-stream');


// gulpタスクの作成
gulp.task('build', function(done){
  browserify({
    entries: ['src/app.js'] // ビルド元のファイルを指定
  }).bundle()
    .pipe(source('bundle.js')) // 出力ファイル名を指定
    .pipe(gulp.dest('dist/')); // 出力ディレクトリを指定

  done();
});

gulp.task('browser-sync', function(done) {
  browserSync.init({
    server: {
      baseDir: "./", // 対象ディレクトリ
      index: "index.html" //indexファイル名
    }
  });
  done();
});

gulp.task('bs-reload', function (done) {
  browserSync.reload();
  done();
});

gulp.task('default', gulp.series( gulp.parallel('build', 'browser-sync'), function(){
  gulp.watch('./src/*.js', gulp.task('build'));
  gulp.watch("./*.html", gulp.task('bs-reload'));
  gulp.watch("./dist/*.+(js|css)", gulp.task('bs-reload'));
}));

上記の中身をgulp4仕様に書き換えました。

gulpfile.js

//plug-in
var gulp = require('gulp');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
var source = require('vinyl-source-stream');


// gulpタスクの作成
gulp.task('build', function(){
  browserify({
    entries: ['src/app.js'] // ビルド元のファイルを指定
  }).bundle()
    .pipe(source('bundle.js')) // 出力ファイル名を指定
    .pipe(gulp.dest('dist/')); // 出力ディレクトリを指定
});
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: "./", // 対象ディレクトリ
      index: "index.html" //indexファイル名
    }
  });
});
gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('default', gulp.series( gulp.parallel('build', 'browser-sync'), function(){
  gulp.watch('./src/*.js', gulp.task('build'));
  gulp.watch("./*.html", gulp.task('bs-reload'));
  gulp.watch("./dist/*.+(js|css)", gulp.task('bs-reload'));
}));

主な変更点は、gulp.watchの記述方法を変更しました。

これで大丈夫かなと思いgulpを実行したら下記のエラーが発生しました。

[18:08:52] 'build' errored after 736 ms
[18:08:52] Error: Received a non-Vinyl object in `dest()`
[18:08:52] 'default' errored after 740 ms

buildとdefaultでエラーが発生している。

調べると、同様のエラーがvinyl-source-streamのバージョンをアップデートすれば直ったという記事を発見し、package.jsonのvinyl-source-streamを2.00に書き換えた。

package.json

{
  "name": "backbone_sample02",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "backbone": "^1.3.3",
    "jquery": "^3.2.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "browserify": "^14.5.0",
    "gulp": "^4.0.2",
    "vinyl-source-stream": "^2.0.0"
  }
}

下記コマンドを実行

$ npm i

これで無事gulpを実行できました。

しかし、gulpfileの書き方やバージョンによる影響についてはもっと勉強が必要だと感じました。