57
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Gulp + Babel + Webpack を試してみた

Last updated at Posted at 2015-07-03

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

キャプチャ.png

リポジトリはこちら 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で書ける時代が来てほしいですね~

57
61
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
57
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?