フロント３銃士

gulp
webpack
babel

※今回は概要紹介なので、導入方法や使い方で一部端折っている部分があります。その辺は別の記事でまとめようかなと思います。(気が向いたら)

gulp

gulpはJavascript製のタスクランナーです。

例えば、

cssファイルが増えて大変だから一つにまとめたい！

とか、

lessをcssにコンパイルしたい！

とかをJavascriptの記述でタスク化することができます。

gulpfile.babel.js

...
gulp.task('less2css', (callback) => {//lessをcssにコンパイルするタスク
    return gulp.src([//対象を指定
            "./src/main/resources/static/less/**/*.less"
        ])
        .pipe( plumber() )//エラーが起きた際によきに計らってくれるおまじない★
        .pipe( less() )// lessをcssにコンパイル
        .pipe( gulp.dest("./src/main/resources/static/css/") );//コンパイルしたファイルを吐き出す
});

gulp.task('bundle', (callback) => {//複数のcssを一つのファイルにまとめるタスク
    return gulp.src([//対象を指定
            "./src/main/resources/static/css/**/*.css",
            "./node_modules/font-awesome/css/font-awesome.css",
        ])
        .pipe( plumber() )
        .pipe( concatCss("bundle.css", {//bundle.cssという名称でまとめる
            rebaseUrls : false//cssファイル内のパスを相対的にリファクタリング品おようにする
         }))
        .pipe(gulp.dest("./src/main/resources/static/bundle/"));
});
...

javaでいうantやgradleに当たると思われます。

gulpで出来ることは多く、様々なプラグインがあるので柔軟性が高いです。
また、同じJavascript製のタスクランナーとしてはgruntが有名です。

出来ることはほぼ一緒ですが、記述がスクリプト(gulp)かjson(grunt)の違いがあるので、好みによって変えるといいでしょう。

babel

babelはJavascriptのES6→ES5へのトランスパイラーです。

es6.js

let name = "太郎";
let age = 22;

let Person = {
  name,
  age
}
...

es5.js

var name = "太郎";
var age = 22;

var Person = {
  name: name,
  age: age
}
...

※ES6の記述は他にもたくさんあり、便利なものばかりなので興味のある方は調べてみてください。

ES6

ES6(ECMAScript 2015)は2015年6月にリリースされたECMASciriptの最新バージョンです。
ECMAScriptとは、乱雑したJavascript系言語を共通化するために考えられたJavascriptの指針みたいなものです。

ブラウザの対応状況

各Webブラウザも随時ES6に対応するようになってきていますが、もちろん古いバージョンを利用しているユーザーもいます。
もし、古いバージョンのブラウザもサポートするのであればES6で記述しているコードを古いバージョンでも実行できるように変換する必要があります。

そこで

前置きが長くなりましたが、ここでbabelの登場です。

babel単体でも使えますが、webpackと連携させる方法が楽だしオススメです。

webpack

webpackはモジュールバンドラーです。

先ほどcssファイルのbundle化はgulpで行いましたが、webpackではjsファイルのbundle化が簡単に出来ます。
※もちろんgulp単体でも出来ます。

webpackには、他にも便利な設定があったり、ローカルに開発サーバーを立てたり、コンパイルしたりと色々出来ますが、今回は割愛します。
興味のある方は調べてみてください。

node_modules

npmコマンドで様々なモジュールをインストールすると

node_modules/
├　/AAA/
├　/BBB/
└　...
のようにインストールされますが、HTML側で

index.html

<head>
  <script type="text/javascript" src="./node_modules/AAA/..."></script>
  <script type="text/javascript" src="./node_modules/BBB/..."></script>  
  ...
</head>

このようにモジュールをインストールするたびにリンクを追加するのはアホらしいですよね。
タスクを組んで利用するモジュールを一つのbundle.jsというファイルにまとめるようにしておけば、

index.html

<head>
  <script type="text/javascript" src="./js/bundle.js"></script>
</head>

モジュールを新しくインストールしてもbundle.jsに組み込まれるようになるので、scriptタグを増やしたり修正する必要は無くなります。

フロント３銃士の役割及び流れ

gulpfile.babel.js

...
gulp.task("bundleJS", function() {
    return gulp.src([
             "./src/**/*.js"
          ])
         .pipe(plumber())//おまじない
         .pipe(webpack(
             {
               entry: "./src/js/entry.js",//対象のエントリーファイル(このファイルを中心にimport/requireでモジュールを読み込んでいく)
               output: {
                 filename: "bundle.js"//出力ファイル名
               },
               module: {
                 loaders: [
                 {
                   test: /\.js$/,
                   loader: 'babel-loader' //babelを使うための宣言
                   }
                 ]
               }
               ...
             }
         ))//
         .pipe(gulp.dest("./src/main/resources/static/bundle/"));
});
...

gulp「よし、作業するぞー。webpack君、必要なモジュールを一つにまとめて〜。出来たら頂戴ね。」
webpack「了解っす。あ、このJSファイルはES6で書かれてるからES5に直さないといけないな〜。babel君に頼もう〜。」
babel「webpack先輩了解です。・・・・変換終わりましたのでお渡しします。」
webpack「サンキュー。じゃあこれを一つにまとめてって、、と。gulpさん出来ましたよ〜。」
gulp「お疲れ〜。じゃあこれを私が指定された場所に置けば作業終了。はい、ご苦労様。webpack君、babel君次も宜しくね〜。」
webpack,babel「うっす。」

つまり、ヒエラルキー的には
gulp > webpack > babel
こんな感じだと思います。

ただ、先ほども言ったようにgulpを使わずにwebpack+babelも可能なのでやり方はいろいろあります。

gulpとbabelは設定も簡単ですが、webpackは少し癖があるので皆さん頑張って覚えてください。

じゃあの。

gulpとbabelとwebpackというフロント開発３銃士