最近、gulpを使わずnpm script + webpackで開発環境を作ったほうがイケてるという話をよく聞くので、えーマジ？と思いGW中に実際に作って体感してみた。

結論を先に書くと

“Webサイト制作なら” gulpを使った環境のほうが良いっす。

大まかな理由は以下。

  • webpack単体でejsやらPostCSSやらのタスクを作るのが大変（後述）
  • 簡単なタスクなどを自分で組みたいときに書き方がぱっと思いつかない（gulpだとモジュール探してpipe()で繋げればいいから難しく考えなくても組める）
  • ExtractTextPluginを使ってcssやhtmlファイルを生成するのがなんか気持ち悪い
  • webpack.config.jsが肥大化、読みにくい
  • ビルド用にwebpack.config.js用意するのもダルい

React.jsやVue.jsなどSPA開発ならnpm script + webpackの環境はコンパクトに収まってすごく相性が良いなと思ったが、Webサイト制作のように案件ごとにそれぞれ要求される環境が変わりやすく、頻繁にタスクを編集する必要がある場合は向かないと思った。

webpackとgulpでPostCSSタスクを比較

PostCSSを使いcssファイルをコンパイル・生成するタスクを作りたい場合で比較してみる。

まずwebpackの場合はローダーを導入しwebpack.config.jsに環境を作った後、エントリーポイントとなるjsファイルにコンパイル前のcssファイルをインポートし、ExtractTextPluginを使ってコンパイル済みcssファイルを別途生成してあげないといけない。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader']
      })
    }
  ]
},
plugins: [
  new ExtractTextPlugin({
    filename: 'style.css',
    allChunks: true
  })
]

一方gulpの場合は必要なgulpモジュールを導入した後、いつもどおりにタスクを書いていけば良い。他のモジュールを噛ませたいなら、pipe()で繋いでいけば良い、非常に楽である。

1
2
3
4
5
gulp.task('css', function () {
    return gulp.src('./src/*.css')
        .pipe(postcss())
        .pipe(gulp.dest('./dest'));
});

実際に作ったソースコードはこちら

gulpの方は結構使いやすかったので最適化して標準の環境として使っています（2017.05 現在）

gulpを使わずwebpackで頑張った開発環境

https://github.com/kokushin/webpack-template

  • babelによるES6対応
  • webpack-dev-serverによるブラウザオートリロード(HMR対応)
  • PostCSS(cssnext)
  • ESLint
  • css, jsを圧縮出力するビルド用タスク

gulpを使った開発環境

https://github.com/kokushin/web-starter-kit

  • babelによるES6対応
  • browsersyncによるブラウザオートリロード(HMR対応)
  • PostCSS(cssnext)
  • EJS(汎用テンプレート付き)
  • ESLint
  • html, css, jsを圧縮出力するビルド用タスク

最後に一言

開発環境よりも成果物をイケイケにしような。