gulp(v4.0.2)gulpfile.jsの直し方

#gulp(gulpfile.js)の直し方

むかし`gulp`で作ったプロジェクトを開いてみると…動かない！

もちろん`node.js`を古いのに戻せば解決します。ですが！

`node.js`のバージョンを変えると、今度は`vue.js`が動かないとか
現場で混乱するケースありえます。
（※みんなが`nodebrew`とか`nvm`で作業しているかは分からないですし。）

なので、あえて`gulp3`→`gulp4`に上げてみました。

`gulp4`にあげたら`gulpfile.js`の書き方変わってるので
いちから書き直しますが、`gulp4`はコールバックや明示的なリターン、がないと動きません。

###動作確認したNode.jsのバージョン

```
$ node -v
v12.16.1
```
####インストール

```shell
npm i gulp@4.0.2
```
####package.json

```package.json
  "scripts": {
    "start": "gulp",
    "build": "gulp build"
  },
```
####まずgulp4の書き方を確認

```gulpfile.js
gulp.task('hoge', () => {
  console.log('debug:hoge');
  return gulp.src('*');
});

gulp.task('fuga', () => {
  console.log('debug:fuga');
  return gulp.src('*');
});

gulp.task('piyo', () => {
  console.log('debug:piyo');
  return gulp.src('*');
});

gulp.task('foo', () => {
  console.log('debug:foo');
  return gulp.src('*');
});

gulp.task('bar', () => {
  console.log('debug:bar');
  return gulp.src('*');
});

gulp.task('baz', () => {
  console.log('debug:baz');
  return gulp.src('*');
});

gulp.task('default',
  gulp.parallel('hoge', 'fuga', 'piyo', 'foo', 'bar', 'baz'));

gulp.task('build',
  gulp.series('hoge', 'fuga', 'piyo', 'foo', 'bar', 'baz'));
```
これでちゃんとタスクが実行されているか確認します。

```shell
$ npm run start

> frontend-templates@1.0.0 start /Users/YourName/frontend
> gulp

[10:06:55] Using gulpfile ~/frontend/gulpfile.js
[10:06:55] Starting 'default'...
[10:06:55] Starting 'hoge'...
[10:06:55] Starting 'fuga'...
[10:06:55] Starting 'piyo'...
[10:06:55] Starting 'foo'...
[10:06:55] Starting 'bar'...
[10:06:55] Starting 'baz'...
debug:hoge
debug:fuga
debug:piyo
debug:foo
debug:bar
debug:baz
[10:06:55] Finished 'hoge' after 32 ms
[10:06:55] Finished 'fuga' after 32 ms
[10:06:55] Finished 'piyo' after 33 ms
[10:06:55] Finished 'bar' after 33 ms
[10:06:55] Finished 'foo' after 33 ms
[10:06:55] Finished 'baz' after 33 ms
[10:06:55] Finished 'default' after 35 ms

```
```shell
$ npm run build

> frontend-templates@1.0.0 build /Users/YourName/frontend
> gulp build

[10:07:37] Using gulpfile ~/frontend/gulpfile.js
[10:07:37] Starting 'build'...
[10:07:37] Starting 'hoge'...
debug:hoge
[10:07:37] Finished 'hoge' after 13 ms
[10:07:37] Starting 'fuga'...
debug:fuga
[10:07:37] Finished 'fuga' after 5.1 ms
[10:07:37] Starting 'piyo'...
debug:piyo
[10:07:37] Finished 'piyo' after 4.82 ms
[10:07:37] Starting 'foo'...
debug:foo
[10:07:37] Finished 'foo' after 4.62 ms
[10:07:37] Starting 'bar'...
debug:bar
[10:07:37] Finished 'bar' after 4.96 ms
[10:07:37] Starting 'baz'...
debug:baz
[10:07:37] Finished 'baz' after 5.37 ms
[10:07:37] Finished 'build' after 40 ms
```

一応これで動きました。
「明示的なリターン」は、式がシンプルな時には使えますが
式が複雑になってくると難しい気がするので、その場合はコールバックを使います。

`gulp3`で書いたタスクがあると思いますが、最後に「コールバック」をつけます。
`cb();`っていうのは`(cb) => {`の所に戻すだけなのでどんな名前でも良いです。
例えば`owari();`と`(owari) => {`でも良いですよ。
有名人は`done();`と`(done) => {`で書いてます。


```gulpfile.js
gulp.task('clean', () => {
  del(['./dist']);
});
```

```gulpfile.js
gulp.task('clean', (cb) => {
  del(['./dist']);
  cb();
});
```
また、シンプルなタスクで直接`gulp.src`などで始まってるものは、
`cb()`を入れる隙間がないですね。
これは`{}`を追加すると2つ以上の式が入ります。

```gulpfile.js
//よくある昔の書き方
gulp.task('hoge', () => gulp.src(
  .pipe()
  .pipe()
  .pipe()
  //ココにcb()は書けない
));
```
```gulpfile.js
gulp.task('hoge', (cb) => {
  gulp.src(
    .pipe()
    .pipe()
    .pipe()
  );
  cb();
}) 
```

####日本語の表示を出す。
やらなくて良い事ですが、デバッグついてに、
「なんかログがブワーって出るから、やっぱり黒い画面が怖い！」とか
言われないようにします。

```
[10:06:55] Starting 'default'...
[10:06:55] Finished 'default' after 35 ms
```
こんな感じのが、沢山でるんですが、正直別に常に見なくても良いです。
下記の設定をしておきます。

```package.json
  "scripts": {
    "start": "gulp --silent",
    "build": "gulp build --silent"
  },
```

```gulpfile.js
browserSync.init({
    server: './public',
    port: 3000,
    logLevel: 'silent', //←これを追加
```
```webpack.config.js
stats: {
  builtAt: false,
  children: false,
  modules: false,
  version: false,
},
```

と、とりあえずサイレントやその他の設定を付けておきます。
コールバックの手前に日本語で`Console.log()`を足しておきます。

```gulpfile.js
gulp.task('hoge', (cb) => {
  gulp.src(
    .pipe()
    .pipe()
    .pipe()
  );
  console.log('"ejs"を"html"に変換して"public"に置いています')//←ココ追加
  cb();
}) 
```

```shell
$ npm run start

> frontend-templates@1.0.0 start /Users/YourName/frontend
> gulp --silent

"ejs"を"html"に変換して"public"に置いています
"scss"を"css"に変換して"public"に置いていま 。
"javascript"を変換して"public"に置いています。
"public"を"http://localhost:3000/"で見えるようにします。
もしサーバーを止めたい場合は、"Ctrl+C"キーを押して下さい
[12:54:09]     Asset      Size  Chunks             Chunk Names
common.js  4.85 KiB  common  [emitted]  common
   top.js  4.81 KiB     top  [emitted]  top
Entrypoint common = common.js
Entrypoint top = top.js
```
```
$ npm run build

> frontend-templates@1.0.0 build /Users/YourName/frontend
> gulp build --silent

"dist"の中身を削除しています。
"public"の中身を"dist"にコピーしています。
"Javascript"を圧縮しています。
"css"を圧縮しています。

```
これで初心者の方に親切な`gulp`に仕上がりました。

……

まあ、今どき「`gulp`初心者」なんて居ないかもですけどね…