Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

フロント3銃士

  • gulp
  • webpack
  • babel

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

gulp

gulpJavascript製のタスクランナーです。

例えば、

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

とか、

lesscssにコンパイルしたい!

とかを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でいうantgradleに当たると思われます。

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

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

babel

babelはJavascriptのES6ES5へのトランスパイラーです。

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タグを増やしたり修正する必要は無くなります。

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

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も可能なのでやり方はいろいろあります。

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

じゃあの。

bakira
主にjavaを使ったサーバーサイドのWebシステムの開発をしています。 今はQiitaへの投稿はやめて個人技術ブログにせっせと日々投稿しています。 フロントサイドについても、ちょいちょいやっています。 今年はインフラ構築知識を伸ばすことが目標。 目指せフルスタックエンジニア!
https://bakira.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした