gulp+webpack環境で各種外部ライブラリを導入する方法(サンプルアプリ付き)


[サンプルアプリ](http://hama-du.net/csa/)
[↑のソース](https://github.com/hamadu/considered-solved-archived)

## 概要

nodejsをベースにしたgulp+webpack環境で各種ライブラリを導入する方法のメモ。ここではVue.jsおよびBootstrapを使う方法について取り上げる。

gulp+webpackの組み合わせでビルド環境を構築する方法については [gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】](http://yutapon.hatenablog.com/entry/2014/12/06/123000) が詳しいので、ここでは深く立ち入らない。サンプルアプリで用いているプロジェクトの構成、およびタスクの一覧と概要を示すだけに留める。


## プロジェクト構成

以下、プロジェクトの構成を簡単に示す。

```tree.(一部略)
├── build         # ビルド後のファイルたちがここに入る
├── gulp          
│   ├── config.js # gulpの設定ファイル
│   └── tasks     # gulpのタスクたち
│       ├── begin.js
│       ├── build.js
│       ├── copy.js
│       ├── css.js
│       ├── watch.js
│       └── webpack.js
├── gulpfile.js   # ./gulp/tasksを読み込むコードが入っている
├── node_modules
├── package.json
└── src           # ソースファイルたち
    ├── css
    │   └── style.css
    ├── js
    │   ├── app.js
    │   └── components
    └── www
        └── index.html

```

### gulpのタスク一覧

|名前|何|
|:--|:--|
|begin|`build`を実行してから`watch`をする。開発のはじめに`gulp begin`を叩いて動かしておく|
|build|`webpack`, `css`, `copy`を順に実行する。|
|copy|静的ファイル（ここでは`www/index.html`のみ）のコピーを行う。|
|css|自前で作ったCSSファイル(`src/css`以下)を最小化しコピーする。|
|watch|`js`,`css`,`html`に変更があった場合それぞれ`webpack`,`css`,`copy`を動かす。|
|webpack|glupのプラグイン`webpack-stream`を用いてwebpackを実行する。|


## Vue.js

### インストール

```
npm install -D vue
```

### 使い方

```src/js/app.js
var Vue = require('vue');

var app = new Vue({
  el: '#app',
  data: {
	// ...
  },
  methods: {
	// ...
  },
});
```

`require('vue')` とすれば後は通常通り使える。

### はまりポイント

特に無し

## Bootstrap

### インストール

```
npm install -D bootstrap
```

### 使い方

```src/js/app.js
require('bootstrap/dist/css/bootstrap.css');
```

jsで先頭にrequire文を記述し、

```gulp/config.js
module.exports = {
  // (略)
  webpack: {
    module: {
      // (略)
      loaders: [
        { test: /\.css$/, loader: 'style!css' },
        { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
      ]
    },
  },
  // (略)
}
```

gulpの設定ファイルにローダーの情報を記述する。

### はまりポイント

gulpでwebpackの処理を行うには ```webpack-stream``` を使えばよい。だが、

```gulp/tasks/webpack.js(動かない)
gulp.task('webpack', function () {
  gulp.src(config.webpack.entry)
    .pipe(webpack(config.webpack))
    .pipe(uglify())                    # webpackしてからuglifyしたいのだが・・・
    .pipe(gulp.dest(config.js.dest));
});
```

のようにwebpackの後にuglifyを実行するように記述すると、タスク実行時に

```require(bootstrap.css)が入ってると何故かパースエラーが
stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error
    at new JS_Parse_Error (/Users/hama_du/projects/considered-solved-archived/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:196:18)
// (略)
```

と怒られる。詳しくは追えていないのだが、そもそもモジュール達をjsにまとめる処理をwebpackがやってくれているので、圧縮処理もwebpack側に寄せるのが正しいようだ。webpackでjsを圧縮するにはgulpの設定ファイルに、

```config.js
    plugins: [
      new webpack.optimize.UglifyJsPlugin()
    ]
```

というように `webpack.optimize.UglifyJsPlugin()` を指定する。


## まとめ

webpackを用いると外部のJSモジュールをロードできるようになり、ライブラリのコードを手元で管理しなくて済む。BootstrapのようなCSSがセットになっているタイプも、適切にローダーを設定すれば正しく動く。

## あわせて読みたい

### gulp+webpack

[gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】](http://yutapon.hatenablog.com/entry/2014/12/06/123000)


### Vue.js

[Vue.js(公式)](http://vuejs.org/)
[Vue.jsから手軽に始めるJavaScriptフレームワーク](http://qiita.com/icoxfog417/items/49f7301be502bc2ad897)


### Bootstrap

[Bootstrap(公式)](http://getbootstrap.com/)