gulp4の導入と設定のお話【プロジェクト単位で使えた】

2018/09/20

WEB DEV

gulp4使ってますかー？
仕事先で、エンジニアの人から
「なんか違う案件で gulp4 使っているそうですよ〜」
という話をされた。

僕はgulpは使っているが普段バージョンは3.9.1でプロジェクトを行っている。

で、その話からちょっとしたある日、新規案件が来たので gulp4 で作ってみるかということでこれを書き始めることにする。

gulp4の導入方法

気になるのが導入方法だと思う。
遠い昔の記憶だと、 gulpはグローバルとローカルの2つに大抵の方はインストールしていると思う。（厳密に言えば、グローバルに別に入れなくてもいいみたいなんだけど、入れた方が何かと都合がいいとかで入れている）

他の案件は gulp3 でやっちゃってるんだけど

いざ、導入しようと思った時に頭に過るのは他の案件は gulp3 でやっちゃってるんだけどという他のプロジェクトとバッティングしないかということだと思う。

僕自身もこれに悩んだ。

けど、悩んでもしょうがないかと思ってローカルだけ gulp4 にしてみた。ローカルだけだし大丈夫でしょということで。
ただ、

npm install gulp -D

これじゃあ、 gulp4 さんはインストールさせてくれなかった。。

gulp4 のローカルインストール

ただ、単にgulpだけだと、3系がインストールされる。なので、プロジェクトディレクトリなどのgulpを使いたいところまで cdコマンドで移動して

npm install gulp@next -D

これでgulp4インストールできた。ポイントは@next。あとは念のためpackage.jsonで確認。

package.json

"devDependencies": {
  "gulp": "^4.0.0"
}

うん！OK！

gulp起動してみるか

gulp4も入れたし、ちゃんと動くかやってみた。

gulp

TypeError: Cannot read property 'apply' of undefined

やんな！笑

gulpのグローバルとローカル

いろいろ調べてみると、どうやらグローバルとローカルのgulpのバージョンが違うのが原因らしい。

現状はこんな感じ。

gulp -v
[21:44:48] CLI version 3.9.1
[21:44:48] Local version 4.0.0

グローバルが3.9.1でローカルが4.0.0。

うむ。これは問題。
グローバルを上げるとエラーはなくなるかもしれないが、他のプロジェクトにも影響が出る可能性がある。どうしたものか。

救世主 npx

あーでもない、こーでもないといろいろググっていると、ICSの鹿野さんがQiitaの記事に書いてた。
最新ビルドシステムGulp 4入門〜環境構築からタスク作成まで〜

あざます！

npmのバージョン5.2.0で導入されたnpxで解決できた。

npxを使うとローカルだけでも動くらしい。なので

npx gulp

と、打てば動く。動いた。

あとはgulpfile.jsの問題

ここまででも疲れたが、まだある。gulpfile.jsだ。
書き方が変わった。

gulp4の書き方

今までgulpfile.jsの書き方はgulp.task();、gulp.task();、gulp.task();といった感じで書いていたと思うけど、今度からは今までgulp.task();でやっていたところは極力「関数」で定義していこうぜっていう感じになっている。（サンプル見る限り）
あとはコールバックを明示的にしないといけなくなったといった感じ。

例えば、

gulp3

gulp.task('styles', function () {
    gulp.src('パス')
      .pipe(sass())
      .pipe(gulp.dest('パス'));
  });

gulp4

function styles() {
  return gulp.src('パス')
    .pipe(sass())
    .pipe(gulp.dest('パス'));
}

// もしくは（あまり推奨してない？）
gulp.task('styles', function (done) {
  gulp.src('パス')
    .pipe(sass())
    .pipe(gulp.dest('パス'));
  done();
});

gulp4だと明示的にreturnやdone()などでコールバックをしないといけないみたい。

gulp4の上の書き方でいくと、
次はexportsというコードを使って関数を宣言しないといけないらしい。（exportsはCommonJsの記法のよう。）

gulp4

exports.styles = styles;

これで宣言できたのでglup4で出てきたseriesとparallelで締めくくろう。

seriesとparallel

gulp4から出てきたseriesとparallelについて書こう。

series

直列処理。タスクを１つずつ処理していく。
書き方はこんな感じ。

gulp.series(タスク, タスク);

parallel

並列処理。タスクを同時に処理していく。
書き方はこんな感じ。

gulp.parallel(タスク, タスク);

例えば、ディレクトリを削除してからsassとjsをコンパイルするとした場合、こんな感じに書ける。

gulp.series(clean, gulp.parallel(styles, scripts));

cleanはコンパイルより先にしておかないといけないので、直列処理のseriesで先に書いて、あとは並列処理でも問題ないのでparallelでstylesとscriptsを並列処理している。

最後に

gulp.task('default', gulp.series(clean, gulp.parallel(styles, scripts)));

を書いて

gulp

とすれば、gulp4でのコンパイルが完成。
あざました。

まとめ

■インストール

npm install gulp@next -D

■gulpfile設定

gulpfile.js



/**
 * 各タスク関数（例）
 * returnで返す
 */

function clean() {
  return del([ 'assets' ]);
}

function styles() {
  return gulp.src('パス')
    .pipe(sass())
    .pipe(gulp.dest('パス'));
}

function scripts() {
  return gulp.src('パス', { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('パス'));
}


// 各タスクの宣言

exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;


// seriesとparallelで処理指定

var build = gulp.series(clean, gulp.parallel(styles, scripts));


// タスク設定

gulp.task('default', build);

■実行

npx gulp