Gulpをやめてnpm+Webpackでプロジェクトを構成してみた

gulpを卒業してみました。

はじめに

今までJavascriptプロジェクトを以下の構成で作成していました。

  • npm
  • webpack
  • gulp

ただ、3段構造がややこしく、gulp無しでも運用できそうだったのでgulpを廃止することにしました。

以下の記事から影響を受けたというのもあります。

Broccoliなんてのもあるんですねえ。

本記事の執筆にあたり、以下を参考にさせていただきました。

gulpの削除による変更点

gulpの削除にあたり、gulpfile.jsで記述していた内容をpackage.jsonに移行しました。

クリーン

gulpfile.js

非同期処理にならないようdel.syncして./dist配下を削除しています。

gulp.task('clean', function () {
    del.sync('./dist');
});

package.json

  "scripts": {
    "_clean": "rimraf dist/*"
  }

rimrafはWindows/Linuxで動作するrm -rfです。
コマンドはnpm i -D rimrafでインストールできます。

ビルド

gulp.file.js

gulp.task("build", ['clean'], function () {
    return merge(
        gulp.src(["./src/**/*.js"])
            .pipe(webpack(webpackConfig)),
        gulp.src(["./src/index.html"])
    ).pipe(gulp.dest('./dist'));
});

これは以下のことを行っています。

  1. クリーンを実行
  2. js配下をWebpackでビルドして出力 (3と並列実行)
  3. index.htmlを出力 (2と並列実行)
  4. 2と3の出力を./dist配下に配置

package.json

  "scripts": {
    "build": "npm-run-all _clean _build:dev",
    "_clean": "rimraf dist/*",
    "_build:dev": "webpack && cpx src/index.html dist/",
  }

buildコマンドがメインです。

npm-run-allpackege.jsonのscriptsコマンドを直列/並列に実行することができます。
例によってnpm i -D npm-run-allでインストールできます。

よってbuildコマンドは以下を実行します。

  1. _cleanコマンド (1)
  2. _build:devコマンド

_build:devコマンドで使用しているコマンドを確認します。

  • webpack
    • Webpackの実行 (ビルド)
  • &&
    • 直列実行 (Windows/Linuxどちらでも可)
  • cpx
    • Windows/Linuxどちらでも使えるcpコマンド

webpack.config.jsは以下となります。
gulp廃止に関係するところのみ記載しています。

module.exports = {
    entry: "./src/js/app.js",
    output: {
        path: "dist",
        filename: "bundle.js"
    },
    module: {
        ...
    }
};

パッケージング

gulp.file.js

gulp.task("build", ['clean'], function () {
    return merge(
        gulp.src(["./src/**/*.js"])
            .pipe(webpack(webpackConfig)),
            .pipe(uglify({preserveComments: 'some'})),
        gulp.src(["./src/index.html"])
    ).pipe(gulp.dest('./dist'));
});

.pipe(uglify({preserveComments: 'some'})),以外はビルドと同じです。
このコマンドはソースコードの難読化です。

package.json

  "scripts": {
    "package": "npm-run-all _clean _build:pro",
    "_clean": "rimraf dist/*",
    "_build:pro": "webpack -p && cpx src/index.html dist/"
  }

ビルドとの違いはwebpack-pオプションが付いているところです。

公式マニュアルのcliによると以下の指定と等価になります。

  • --optimize-minimize
  • --optimize-occurence-order

ソースコードのサイズを抑えたりするプラグインですが、詳しくはoptimizationを参照して下さい。

--optimize-minimizeがuglify同等のことを行ってくれます。

テスト

gulp.file.js

gulp.task('test', function (done) {
    new Server({
        configFile: __dirname + '/karma.conf.js',
        singleRun: true
    }, done).start();
});

Karmaサーバを起動してテストを実行しています。

package.json

  "scripts": {
    "test": "karma start --single-run"
  }

こちらはシンプルにkarmaコマンドを実行するだけです。

CIで使うことを想定しているため、テストを1度実行したら終了する--single-runオプションを付けます。

他のオプションは下記公式サイトのマニュアルをご覧下さい。

Karma – Configuration File

総括

gulpを使用せず、npmとwebpackでプロジェクトを構成するために必要な変更点をまとめました。

Githubの対象コミットへのリンクも貼っておきます。

コメントを残す