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

インストール

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'));

これでちゃんとタスクが実行されているか確認します。

$ 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

$ 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();
}) 

$ 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初心者」なんて居ないかもですけどね…