gulpのタスクをES2015(ES6)で記述できるように設定した話

よろしければシェアお願いいたします

gulpのタスクをES2015で記述できるように設定した話
JSはES2015で書きたいなと思いつつ、採用している現場に行ったことがないのでgulp使用を機に取り入れてみます。

※この記事では、事前にgulpを導入していることが前提となります。
まだの方はノンエンジニアでも簡単に出来るgulp導入をご覧ください。

前準備 gulp-load-pluginsの導入

ES2015とは関係ありませんが、gulpのプラグインを増やしていくとgulpfile.jsの頭にrequireがどんどん増えていきます。
gulp-load-pluginsを導入すると、package.jsonに書いてあるプラグインを読み込んでくれるので一つ一つrequireする必要がなくなります。
スッキリした状態からES2015で書きたい!!という方は是非gulp-load-plugins導入を検討してみて下さい。

インストールはこちらです。

package.jsonのdevDependenciesにgulp-load-pluginsが追加されていればインストールは終わりです。

gulpfile.jsを下記のように書き直します。

タスクを書く時は、こんな感じに使用します。

package.jsonに書かれているパッケージでgulp-load-pluginsで認識出来るプラグインは、”gulp-“で始まるものだけのようなので気を付けて下さい。

ES2015を使えるようにする

ではさっそく必要なものをインストールしていきます。

package.jsonのdevDependenciesに、
「gulp-babel」と「babel-preset-es2015」が追加されていればインストールは完了です。

そして、package.jsonなどがおいてある場所へ
下記のファイルを作成しておきます。
ファイル名:.babelrc

ES2015でタスクを記述する

gulpfile.jsをgulpfile.babel.jsに変更し、タスクの書き方も変更していきます。

こんな感じに変更して無事にタスク実行が出来れば導入は終わりです。

タスクを書くことを目的としてES2015にするメリットはまだ見つけていないのですが、
まだES2015を触ったことがない方は勉強もかねて対応してみるといいのではないでしょうか。

追記:別PCに環境構築したらタスク起動時にエラーで怒られるようになった

エラー内容はこんな感じ

解決方法

手順1.babel-registerを入れる

手順2.gulpfile.babel.jsの上のほうに下記を追記
require( ‘babel-register’);

スポンサーリンク
広告1
広告1

よろしければシェアお願いいたします

フォローする

スポンサーリンク
広告1