bowerとgulpのお勉強


## abst.

bowerは使ったことがあるが、ディレクトリ構造を調整したなとは思っていた。
gulpを使ってタスクを実行して振り分ける方向で。

また、ブートストラップでマテリアルデザインを適用するようにしたい。
http://qiita.com/tiwu_official/items/280b73bc19f9fea53099

## nodebrew

nodebrewを導入した
http://akiyoko.hatenablog.jp/entry/2015/06/20/132239
http://qiita.com/oreo3@github/items/622fd6a09d5c1593fee4

	権限の変更は若干不安だったけどいいなりに変更した
	後半のGruntは読んでない

brew installだとダメみたい。
http://qiita.com/armorik83/items/ed97c618a55d9c13c34b

npmのパッケージ管理はjson
http://qiita.com/sinmetal/items/395edf1d195382cfd8bc

	今回はテンプレをコピペしたのでinitはしなかったけどメモ。


## gulp


公式
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

丁寧だけど縦長い、windows向けだったので途中は読み飛ばしつつ、、テンプレートはとても参考になった。
http://labo.dotsmart.biz/web-bootstrap

	タスクをディレクトリ分けしてメインスクリプトからincludeする構成

小さな構成の事例として参考。なんとなくGruntとの比較もできた。
http://create-something.hatenadiary.jp/entry/2014/07/27/204633

メインの参考。
http://qiita.com/ka215/items/f54f190e36c454ebea73

	モジュールが多くて戸惑ったけど、一覧されていてjsonからインストールできた
	（でも、ほかサイトのやり方とバージョン依存でうまく行かなかったのでやりなおした。）
	gulpのタスクについての考察もフローがわかりやすい。
	ちゃんとやれるようになったらいいなあ。と思いつつ、以降はひとまず呼び飛ばす。
### gulpプラグイン

使って効率化するのが正しい使い方っぽい？
npm install --seve-dev gulp-hoge gulp-hoge2

### gulp-load-plugins

package.jsonから読み込んでくれる
http://qiita.com/dhun/items/daa207fc05c67f255c23

2016年、僕のおすすめgulpプラグイン | gulp | Horic Design
http://goo.gl/MLmLZo

Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG
http://goo.gl/dyQ7k5

俺流gulpレシピ - Qiita
http://goo.gl/YIxVtf

### del.bind

削除はプラグインを使わなくてもできる。ワイルドカードとかで複数削除できる。

https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md
http://qiita.com/shinnn/items/bd7ad79526eff37cebd0

## webpack

難しい。

わかりやすい。
http://thujikun.github.io/blog/2014/12/07/webpack/

基本は閉じたスコープで管理される
exposeローダーを使うとグローバルに読み込める（requireは必要になる。）

http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/

> require(expose?<libraryName>!<moduleName>)

```
require('expose?$!expose?jQuery!jquery');
```

### jQueryプラグイン

たぶん、jqueryプラグインをwebpackで使うのはあまり良くないのかもしれない。
あまり参考情報がないし。

慣れてないから、とりあえずグローバルで読み込ませたい。
ブラウザのコンソールからも動かしたい。
なかなかうまくいかない。
詳細はわかってないけど、とりあえず動かしてみる。。

```
# ローダーのインストール
npm install expose-loader --save-dev
npm install style-loader --save-dev
npm install url-loader import-loader --save-dev
npm install url-loader  --save-dev
npm install imports-loader css-loader --save-dev
npm install url-loader file-loader --save-dev
npm install script-loader --save-dev
```

```
# pluginのインストール
bower install mbraak/jqTree
bower install carhartl/jquery-cookie
```

### 実現パターン1

ProvidePluginの中で指定した

```
'loaders': [
    // グローバル化
    {test: /jquery\.js/, loader: "expose?$!expose?jQuery"},
    { test: 'tree.jquery.js', loader: "expose?$!expose?jqTree" },
    { test: 'jquery.cookie.js', loader: "expose?$!expose?jquery.cookie" }
]
```

```

// bowerのモジュールを読めるようにするために
new webpack.webpack.ResolverPlugin([
    new webpack.webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])
]),
//webpack-dev-serverを使っているときに、画面をリロードすることなくモジュールの差し替えを可能にする。（実験的機能）
new webpack.webpack.HotModuleReplacementPlugin(),
//compile時にエラーが出たらskipする。
new webpack.webpack.NoErrorsPlugin(),
//被ってるモジュールがいたらひとつにまとめる。
new webpack.webpack.optimize.DedupePlugin(),
//よく使われるモジュールに降るIDの桁数をより短くすることでよりコードを圧縮する。
new webpack.webpack.optimize.OccurenceOrderPlugin(),
//ファイルを細かく分析し、まとめられるところはできるだけまとめてコードを圧縮する。
// Closure CompilerのADVANCED_OPTIMIZATIONみたいなことはしない。
new webpack.webpack.optimize.AggressiveMergingPlugin(),
// jQuery を自動的にロードする(require('jquery')せずに使用可)
new webpack.webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'jQuery.cookie': 'jquery.cookie'
}),
```

```
require("jquery.cookie");

```

### 実現パターン2

script-loaderをあとから利用して読み込んだ

```
require('script!jquery.cookie');
```

### その後、普通にrequireでうまくいった

たぶん、ローダーをインストールしたことが関係ある気がする。。

```
require('jquery.cookie');
```

### coffeeローダー

さらに、jqTreeをCoffeeローダーを使ってcoffeeスクリプトから読み込む

```
npm install coffee-loader --save-dev
npm install coffee-script --save-dev
```
 
```
'loaders': [
	{ test: /\.coffee$/, loader: 'coffee-loader' },
]
```

```
require("jqTree/src/tree.jquery");
```

#### 参考

http://qiita.com/civic/items/82c0184bcadc50965f91
https://webpack.github.io/docs/configuration.html
http://qiita.com/shn/items/7bd544a39ee7ac858669

### vue.jsをグローバルにする

exposeのロードがうまくいかない。
と思ったけど、下記を参考にしたらできそうな気がしてる。

https://www.talkingcoder.com/article/6272954509280412006

いろいろ試して、requireしなくてもよい。
でも、jsがわで呼び出ししていないとコンパイルに含んでくれないみたい。
強制で含められるのかどうか？？
それさえやっていれば、これまでうまく行かなかったexposeとProvidePluginの併用は大丈夫みたい。

### commonchunk

共通ライブラリ扱いらしい。。

http://chikuwa-parfait.tumblr.com/post/137260839478/commonschunkplugin%E3%81%AE%E8%A8%AD%E5%AE%9A

### requireをグローバルにする

デベロッパーコンソールから使いたくて、

window.require = function() {...}

でやってみたけどうまく行かず、、falseがかえってくる。
webpack-streamをつかっているからかも。

http://stackoverflow.com/questions/29223071/how-do-i-require-from-the-console-using-webpack

```
window['require'] = function(modules, callback) {
  var modulesToRequire = modules.forEach(function(module) {
    switch(module) {
      case 'immutable': return require('immutable');
      case 'jquery': return require('jquery');
    }
  });
  callback.apply(this, modulesToRequire);
}
require(['jquery', 'immutable'], function($, immutable) {
  // immutable and $ are defined here
});
```

## browsersync

https://www.browsersync.io/docs/options/

### プロキシにしてほかサーバーを参照

「server」（ディレクトリ指定）の設定はプロキシとは共存しない

https://github.com/johnpapa/lite-server/issues/68
http://nantekottai.com/2015/03/23/browser-sync/

```
gulp.task(taskName, function() {
  browserSync.init({
    proxy: "hogehoge.com:80",
    //server: config.projectPath.public.root,
    startPath: "/sample.html",
    open: 'external'
  });
});
```

## おもったこと

面白い
便利
モジュールの依存関係とか結構大変そうだなあ