Gulp + Babel + Webpack を試してみた

NodeSchool International Day in Tokyoに参加してBabelのチュートリアルを触ってきたので引き続きいろいろ触ったものをメモとして残しておきます。下のような画面で何かのサンプルコードを写経したやつを題材に、アプリのJSはBabelで書きつつWebpackで依存関係を解決してGulpでタスクを回すという感じで書き直してます。

リポジトリはこちら https://github.com/rei-m/js_neta/tree/master/observer_pattern

使ったパッケージたち

    "babel-core": "^5.5.8",
    "babel-loader": "^5.1.4",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.1.0",
    "gulp-concat": "^2.5.2",
    "gulp-if": "^1.2.5",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.2.0",
    "gulp-webpack": "^1.5.0",
    "node-libs-browser": "^0.5.2",
    "require-dir": "^0.3.0",
    "webpack": "^1.9.10"

gulpfile.js

• gulp/tasks配下のファイルをすべて読み込んでGulpのタスクとして登録する

var requireDir = require('require-dir');

requireDir('./gulp/tasks', { recurse: true });

gulp/configs/index.js

• gulp タスクの設定を書く。

var taskName = "index";
var fileName = taskName + ".js"

var dest = "./js/build"; // 出力先ディレクトリ
var src = "./js/src/index";  // ソースディレクトリ

var webpack = require("webpack");

module.exports = {

  // タスク名
  taskName : taskName,

  // リソース
  src : src + "/**/*.js",

  // jsのビルド設定
  js: {
    dest: dest,
    uglify: false
  },

  // webpackの設定
  webpack: {
    entry: src + "/" + fileName,
    output: {
      filename: fileName
    },
    resolve: {
      extensions: ["", ".js"],
      modulesDirectories: ["node_modules", "bower_components"],
      alias: {
      }
    },
    plugins: [
      new webpack.ResolverPlugin(
          new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
      ),
      new webpack.optimize.DedupePlugin(),  // ライブラリ間で依存しているモジュールが重複している場合、二重に読み込まないようにする
      new webpack.optimize.AggressiveMergingPlugin(),　//ファイルを細かく分析し、まとめられるところはできるだけまとめてコードを圧縮する
      new webpack.ProvidePlugin({
          jQuery: "jquery",
          $: "jquery",
          jquery: "jquery"
      })
    ],
    module: {
      // babel Loaderを指定してWebpackがBabelのコンパイルをできるように
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        }
      ]
    }
  }
}

gulp/tasks/index.js

• 対応するconfigに従いGulpタスクを登録.

var gulp = require("gulp"),
    gulpif = require("gulp-if"),
    uglify = require("gulp-uglify"),
    webpack = require("gulp-webpack"),
    config = require("../configs/index");

gulp.task("index", function () {
    gulp.src(config.src)
        .pipe(webpack(config.webpack))
        .pipe(gulpif(config.js.uglify, uglify()))
        .pipe(gulp.dest(config.js.dest)); 
});

はやく普通にES6で書ける時代が来てほしいですね～