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は必要になる。）

require(expose?!)

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のロードがうまくいかない。
と思ったけど、下記を参考にしたらできそうな気がしてる。

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

commonchunk

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

requireをグローバルにする

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

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

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

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

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

「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'
  });
});

おもったこと

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