gulp3.9.1から最新のgulp4.0に上げた時の記録

割と移行が大変でした。
nodeやnpm周りをそこまでがっつり触っていない方は（自分も含め）
余裕のある時に作業したほうがいいかもです。

#まず現状の確認をします。
インストールしたosはcentos7です。

version.shell

[vagrant@localhost example]$ gulp -v
[00:54:27] CLI version 3.9.1
[00:54:27] Local version 3.9.1
[vagrant@localhost example]$ node -v
v6.12.3
[vagrant@localhost example]$ npm -v
3.10.10

【参考ページ】
https://qiita.com/tonkotsuboy_com/items/9ab83fe0f25cf0b010f3

nodeのバージョン管理ツールがなかったのでインストール。
検索したところnvm,n,nodebrewなどがあり
知名度の個人的印象とgithubのスター数からnvmを採用

#環境周りのインストール

◆nvmのインストール
https://qiita.com/ysti/items/0c79d0d5e998e5861be2

nvm.shell

[vagrant@localhost example]$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
/usr/lib
├── gulp@3.9.1
=> If you wish to uninstall them at a later point (or re-install them under your
=> `nvm` Nodes), you can remove them from the system Node as follows:

     $ nvm use system
     $ npm uninstall -g a_module

グローバルのgulpをアンインストールできます
というのが出た。今回はもう使わないので
ローカルディレクトリ、グローバル共にアンインストールする。

gulp.shell

[vagrant@localhost example]$ gulp -v
[01:35:21] CLI version 3.9.1
[01:35:21] Local version 3.9.1
[vagrant@localhost example]$ npm uninstall gulp --save-dev #ローカルアンインストール
[vagrant@localhost example]$ sudo npm uninstall -g gulp　#グローバルアンインストール

nvmを使えるように設定。（再起動でもいけるらしいです）

source.shell

source ~/.bashrc

nvmの安定板をインストール

nvm.shell

nvm install stable

nodeのバージョンが上がっていれば成功

node.shell

node -v

再起動しても最新の安定板nodejsを使用するという指定

nvm.shell

nvm alias default stable

ここでいよいよGulp4のインストールですが
package.jsonが残っていて中にgulp3の記述があると
再び３がインストールされるのでご注意ください。
私の場合はすでに動いている別プロジェクトがあったので
そこのpackage.jsonをコピーしてからインストールコマンドを打ちました。
もしくは明示的に指定しても良いかもしれません。

package.json

{
  "dependencies": {
    "gulp": "^4.0.2",

  }
}

プロジェクトのディレクトリに移動して

gulp.shell

npm install --save-dev gulp
# npm install --save-dev gulp@next
# ↑こちら2020年2月1日現在使えませんでした。

プロジェクトフォルダにインストールしたgulpを使用するには下記コマンドを使用
なおnpxはnpmのバージョン5以上で使えるパッケージ管理や実行に使えるコマンド。
gulpをグローバルにインストールせず実行する際などに使用できるとのこと。
（最近の流れではグローバルにインストールしないとのことを
今回の作業でたくさん目にしました。）

npx.shell

npx gulp -v
npx gulp (タスク名)

#個人的に使用しているプラグインをインストール
バグが起こった際に内容を把握しやすくするため一つずつ実行

gulp-babel babel-core babel-preset-envをインストール

gulp-babel.shell

[vagrant@localhost example]$ npm i -D gulp-babel babel-core babel-preset-env
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ babel-core@6.26.3
+ gulp-babel@7.0.1
+ babel-preset-env@1.7.0
added 94 packages from 24 contributors and audited 6605 packages in 25.896s
found 0 vulnerabilities

gulp-clean-cssをインストール

gulp-clean-css.shell

[vagrant@localhost example]$ npm i -D gulp-clean-css
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-clean-css@3.9.4
added 2 packages from 2 contributors and audited 6631 packages in 6.391s
found 0 vulnerabilities

gulp-combine-media-queriesをインストール

gulp-combine-media-queries.shell

[vagrant@localhost example]$ npm i -D gulp-combine-media-queries
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-combine-media-queries@0.2.0
added 59 packages from 23 contributors and audited 6809 packages in 17.248s
found 0 vulnerabilities

gulp-concatをインストール

gulp-concat.shell

[vagrant@localhost example]$ npm i -D gulp-concat
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-concat@2.6.1
added 3 packages from 38 contributors and audited 6841 packages in 5.981s
found 0 vulnerabilities

gulp-headerをインストール

gulp-header.shell

[vagrant@localhost example]$ npm i -D gulp-header
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-header@2.0.5
added 4 packages from 9 contributors and audited 6859 packages in 6.808s
found 0 vulnerabilities

gulp-imageminをインストール

gulp-imagemin.shell

[vagrant@localhost example]$ npm i -D gulp-imagemin
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

> gifsicle@3.0.4 postinstall /var/www/html/wp-content/themes/example/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully

> jpegtran-bin@3.2.0 postinstall /var/www/html/wp-content/themes/example/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully

> optipng-bin@3.1.4 postinstall /var/www/html/wp-content/themes/example/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-imagemin@4.1.0
added 334 packages from 134 contributors and audited 15284 packages in 42.625s
found 6 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

gulp-plumberをインストール

gulp-plumber.shell

[vagrant@localhost example]$ npm i -D gulp-plumber
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-plumber@1.2.0
added 7 packages from 2 contributors and audited 15320 packages in 9.104s
found 6 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

gulp-sassインストール

gulp-sass.shell

[vagrant@localhost example]$ npm i -D gulp-sass

> node-sass@4.9.0 install /var/www/html/wp-content/themes/example/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/linux-x64-64_binding.node
Download complete  ] - :
Binary saved to /var/www/html/wp-content/themes/example/node_modules/node-sass/vendor/linux-x64-64/binding.node
Caching binary to /home/vagrant/.npm/node-sass/4.9.0/linux-x64-64_binding.node

> node-sass@4.9.0 postinstall /var/www/html/wp-content/themes/example/node_modules/node-sass
> node scripts/build.js

Binary found at /var/www/html/wp-content/themes/example/node_modules/node-sass/vendor/linux-x64-64/binding.node
Testing binary
Binary is fine
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-sass@4.0.1
added 92 packages from 111 contributors and audited 15915 packages in 63.094s
found 16 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

[vagrant@localhost example]$ npm audit fix
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 9 packages from 7 contributors, updated 4 packages and moved 1 package in 8.67s
fixed 5 of 16 vulnerabilities in 15915 scanned packages
  11 vulnerabilities required manual review and could not be updated

gulp-uglifyをインストール

gulp-uglify.shell

[vagrant@localhost example]$ npm i -D gulp-uglify
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-uglify@3.0.0
added 6 packages from 41 contributors and audited 15930 packages in 10.026s
found 15 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
[vagrant@localhost example]$ npm audit fix
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 6.038s
fixed 0 of 15 vulnerabilities in 15930 scanned packages
  15 vulnerabilities required manual review and could not be updated
[vagrant@localhost example]$

gulp-postcssをインストール

gulp-postcss.shell

[vagrant@localhost example]$ npm i -D gulp-postcss
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-postcss@7.0.1
added 19 packages from 50 contributors and audited 16005 packages in 10.549s
found 15 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
[vagrant@localhost example]$ npm audit fix
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 6.175s
fixed 0 of 15 vulnerabilities in 16005 scanned packages
  15 vulnerabilities required manual review and could not be updated

gulp-webserver

gulpwebserver.shell

[vagrant@localhost example]$ npm i -D gulp-webserver
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-webserver@0.9.1
added 57 packages from 53 contributors and audited 16259 packages in 17.566s
found 17 vulnerabilities (1 low, 15 moderate, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
[vagrant@localhost example]$ npm audit fix
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 6.718s
fixed 0 of 17 vulnerabilities in 16259 scanned packages
  17 vulnerabilities required manual review and could not be updated

#deprecatedなプラグイン
gulp-uncss　→　gulp-postcss
gulp-minify-css　→　gulp-clean-css
gulp-util　→　依存関連が複雑なので単純な置き換えではなく歴史的な問題ということでスルー

#インストール時のバグについて

bug.shell

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4

というバグで検索
https://github.com/Unitech/pm2/issues/3676
https://shimz.me/blog/node-js/4123
https://qiita.com/MasamotoMiyata/items/0fdad60d80687fb01909

結局MAC関連のバグということで今回はスルーしました。
●gulp-imageminインストール時のバグ

bug.shell

found 6 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

npm auditというのはpackageのセキュリティをチェックしてくれるものとのこと
https://blog.kazu69.net/2018/05/14/package_security_aware_with_npm_audit_added_npm_v6/
似たような方の状況があったので参考にさせていただきつつ
https://qiita.com/Stein/items/6f39ec971302d64e056d
対応として以下を実行してみる

npm.shell

[vagrant@localhost example]$ npm audit fix
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 6.097s
fixed 0 of 6 vulnerabilities in 15284 scanned packages
  6 vulnerabilities required manual review and could not be updated

手動でレビューしてくださいとのことだが
やり方がわからず、作業している余裕もなく今回はスルー。

#gulp3から4で変わったこと
1.プロジェクトディレクトリのルートにpackage-lock.jsonという新たなファイルが追加されていた。役割としてはより厳密にプラグインの依存関係を保ったままインストールしたりちょっとしたバージョン管理もできるっぽい。
＞gulp本家サイトに解説があります。（英語です）

2.node_modulesディレクトリに展開されるファイルも以前は
node_modules
┗gulp
　┗node_modules
　　┗archy
　　┗interpret
などとなっていたものが
node_modules
┗archy
┗interpret
となりgulpをインストールしただけで大量のディレクトリが
node_modulesディレクトリ直下に展開されるようになっていた。
今回の作業の背景としてgulp3.9.1で最初設定をしたところ
このディレクトリ直下展開が行われたため4を試したところ
同様の展開が行われた。

#gulp3から４に上げてgulpfilejsの書き方で怒られるようになったもの

###『Did you forget to signal async completion?』
こんなエラーが出たらメソッドチェーンの先頭にreturnを追加しましょう。

error.js

gulp.task('img', function() {
    gulp.src('./images/*.gif')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

↓

OK.js

gulp.task('img', function() {
    return gulp.src('./images/*.gif')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

###『AssertionError: Task function must be specified』
これはgulp4になってから複数のタスク呼び出しの書き方が変わったため出ているものです。

error.js

gulp.task('default', ['task1', 'task2'], function(){
    // defaultタスクの実行内容
});

↓

ok.js

gulp.task('default', gulp.series('task1', 'task2', function(){
    // defaultタスクの実行内容
}));

###ここで一つハマったことをさらします
以下のように実行するとエラーメッセージが表示されることなく
Finished 'ampcmq' after 208 ms
などと実行結果が表示されるが
gulp.destで吐き出されるはずのファイルが吐き出されないという状況になった。
割とわかりにくいエラーだったのでメモしておきます。

okbuterror.js

gulp.task('default', gulp.series('task1', 'task2'), function(){
    // defaultタスクの実行内容
});

またgulp.watchの引数も指定方法が変わったようで
以下のエラーが出ました。
『watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)』

error.js

gulp.task('watch', function() {
    gulp.watch('./sass/**/*.scss',['sass2']);
});

↓

ok.js

gulp.task('watch', function() {
    gulp.watch('./sass/**/*.scss', gulp.task('sass2'));
});

#感想
自分のケースではnodeのバージョンが上がったので必然的にgulpも上げた感じで
特にこれまでと動作的に変わったという部分はまだ実感しておりませんが
package-lock.jsonができていたりと改善されている感じはします。