tmuxを使って同一コンソール内で複数のdocker runを行ったメモ。webpack , karma, gulp + express + socket.io , mongodb.

[前回][link-18]の続き。複数ウィンドウを開くのが面倒なため１つのコンソールを分割する。

(2016/2/4 追記）webpackの設定で、ファイルを更新した時はうまくいくが、新規作成したときに認識しなかったのでgulpを使用する構成に変更。

tmuxでウィンドウを分割

tmuxの設定はコピペ。
[達人に学ぶ.tmux.confの基本設定][link-4]

share/config/tmux.conf

#prefix C-aに変更する
set -g prefix C-a

# C-bのキーバインドを解除する
unbind C-b

# キーストロークのディレイを減らす
set -sg escape-time 1

# ウィンドウのインデックスを1から始める
set -g base-index 1

# ペインのインデックスを1から始める
setw -g pane-base-index 1

# 設定ファイルをリロードする
bind r source-file ~/.tmux.conf \; display "Reloaded!"

# C-a*2でtmux内のプログラムにC-aを送る
bind C-a send-prefix

# | でペインを縦に分割する
bind | split-window -h

# - でペインを横に分割する
bind - split-window -v

# Vimのキーバインドでペインを移動する
bind h select-pane -L
bind j select-pane -D
bind k select-pane -U
bind l select-pane -R
bind -r C-h select-window -t :-
bind -r C-l select-window -t :+

# Vimのキーバインドでペインをリサイズする
bind -r H resize-pane -L 5
bind -r J resize-pane -D 5
bind -r K resize-pane -U 5
bind -r L resize-pane -R 5


# 256色端末を使用する
set -g default-terminal "screen-256color"

# ステータスバーの色を設定する

# ウィンドウリストの色を設定する
setw -g window-status-fg cyan
setw -g window-status-bg default
setw -g window-status-attr dim
# アクティブなウィンドウを目立たせる
setw -g window-status-current-fg white
setw -g window-status-current-bg red
setw -g window-status-current-attr bright

# ペインボーダーの色を設定する
set -g pane-border-fg green
set -g pane-border-bg black
# アクティブなペインを目立たせる
set -g pane-active-border-fg white
set -g pane-active-border-bg yellow

# コマンドラインの色を設定する
set -g message-fg white
set -g message-bg black
set -g message-attr bright

# ステータスバーを設定する
## 左パネルを設定する
set -g status-left-length 40
set -g status-left "#[fg=green]Session: #S #[fg=yellow]#I #[fg=cyan]#P"
## 右パネルを設定する
set -g status-right "#[fg=cyan][%Y-%m-%d(%a) %H:%M]"
## ステータスバーのUTF-8サポートを有効にする
set -g status-utf8 on
## リフレッシュの間隔を設定する(デフォルト 15秒)
set -g status-interval 60
## ウィンドウリストの位置を中心寄せにする
set -g status-justify centre
## ヴィジュアルノーティフィケーションを有効にする
setw -g monitor-activity on
set -g visual-activity on
## ステータスバーを上部に表示する
set -g status-position top

以下の画像のように分割したウィンドウにしたい。
そのため、gitbashのウィンドウを大きくしておく。

gitbashの上のバーで右クリック、プロパティを選択肢、レイアウトのタブを開く。
幅120、高さ35で設定してみた。

tmuxはubuntu14.04にはプレインストールされていた。
起動してウィンドウを分割するシェルを作成。

share/shell/tmux_start.sh

#!/bin/bash

# セッション名がなければ定義
if [ -n "$SESSION_NAME" ];then
  session=$SESSION_NAME
else
  session=dev-`date +%s`
fi

# ウィンドウ名を定義
window=development

### tmuxのセッションを作成
tmux -f /home/vagrant/share/config/tmux.conf new-session -d -n $window -s $session  

tmux send-keys "echo test1" C-m

#ウィンドウ作成
tmux split-window -h
tmux send-keys "echo test2" C-m
#tmux send-keys "./share/shell/karma_docker_start.sh" C-m

tmux split-window -h
tmux send-keys "echo test4" C-m

tmux select-pane -t 2
tmux split-window
tmux send-keys "echo test3" C-m

tmux select-pane -t 4
tmux split-window
tmux send-keys "echo test5" C-m

### 最初のpaneを選択状態にする
tmux select-pane -t 1

### セッションにアタッチ
tmux attach-session -t $session

webpackとkarmaのインストール（Docker)

前回と同様にDockerfileからビルド。
windowsでファイル作ったら改行コードがCRLFでシェルが動かなくて30分くらい悩みました。
改行コードLFで保存しなおして起動確認。

share/shell/env.conf

#!/bin/bash

# 共有ディレクトリ
path_share_dir="/home/vagrant/share"

# docker用ディレクトリ
path_Dockerfile_dir="${path_share_dir}/Docker"

# 開発用ディレクトリ
path_dev_dir="${path_share_dir}/dev"

# dockerイメージファイル名(:タグ名)
imageName_karma="hibo/karma"
imageName_webpack="hibo/node_webpack"
imageName_express="hibo/express"

# コンテナ名
containerName_karma="karma"
containerName_webpack="webpack"

share/shell/build_webpack.sh

#!/bin/bash

source "/home/vagrant/share/shell/env.conf"

cd $path_Dockerfile_dir/webpack && docker build -t $imageName_webpack .

share/Docker/webpack/Dockerfile.

FROM node:5.4.0

RUN mkdir -p /usr/local/src/share
WORKDIR /usr/local/src

#package.jsonを書き出し
RUN echo '{ "name": "my_webpack","scripts": {"build": "webpack"} }' > package.json

RUN npm i -D webpack
RUN npm i -D babel-core babel-preset-es2015 babel-preset-react
RUN npm i -D eslint
RUN npm i -D pre-commit precommit-hook
RUN npm i -D lodash
RUN npm i -D react

RUN npm i -D eslint-loader
RUN npm i -D babel-loader
RUN npm i -D css-loader
RUN npm i -D react-hot-loader
RUN npm i -D style-loader

# babelで使用するpresetsの書き出し
RUN echo '{"presets": ["es2015", "react"]}' > .babelrc
``

```share/shell/webpack_docker_start.sh
#!/bin/bash

# 設定ファイルの読込
source "/home/vagrant/share/shell/env.conf"

# 前回のkarmaコンテナが残っているかチェック。
docker ps -a | grep $containerName_webpack >/dev/null 2>&1

# コンテナが残っている場合は削除。
if [ $? -eq 0 ]; then
  docker rm -f $containerName_webpack
fi

# コンテナの起動
docker run -it --name $containerName_webpack --rm \
           -v $path_dev_dir:/usr/local/src/share \
           $imageName_webpack /bin/bash -c \
           'npm run-script build -- --config ./share/webpack/webpack.config.js --progess --colors --watch'

npm run build -- --optionsに変更したのが今回新しく覚えたこと。
Dockerで一つだけ動かすなら前回のようにグローバルインストールする必要はないと思うので。
package.jsonのscriptsに指定してやればパスを通さなくてもnpm run スクリプト名で実行できる。
オプションは -- の後に続けて書いてやればOK。
今回の場合だと、npm run build -- --config ./share/webpack/webpack.config.js --progess --colors --watchはwebpackにパスが通っているときのwebpack --config ./share/webpack/webpack.config.js --progess --colors --watchと同意。

前回はtest-context.jsをエントリポイントにする方法を試したので、
今回は-spec.jsの各ファイルをエントリポイントにする方法を試してみる。

share/dev/webpack/webpack.config.js

require('babel-core/register');
module.exports = require('./configs/karma');

share/dev/webpack/configs/_base.js

export default {
  entry: 'app.js',
  output: { filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js'] 
  },
  watchOptions: {
    poll: true
  }
};

share/dev/configs/karma.js

import base from './_base';
import path from 'path';
import fs from 'fs';
export const src = path.resolve(__dirname,  '../../karma/test/spec');
export const dist = path.resolve(__dirname, '../../karma/test/dist');

var entry_point = {};
// specフォルダ内のファイル名一覧を取得。
var filenames = fs.readdirSync(path.resolve(__dirname,'../../karma/test/spec'));

filenames.forEach((elm, index)=>{
  //-spec.jsで終わるjavascriptファイルだけをエントリーポイントに登録
  if( /-spec\.js$/.test(elm) ){
    entry_point[elm.replace(".js","")] = "./" + elm;
  }
});

const webpackConfig = Object.assign(base, {
  context:src,
  entry: entry_point,
  output: {
    path: dist,
    filename: '[name].bundle.js'
  }
});

export default webpackConfig;

続いてkarma。

share/Docker/karma/Dockerfile.

FROM node:4.2.4

RUN mkdir -p /usr/karma/share
WORKDIR /usr/karma

#package.jsonを書き出し
RUN echo '{ "name": "my_karma","scripts": {"tests": "karma start"} }' > package.json

# karmaのインストール
RUN npm install --save-dev jasmine-core
RUN npm install --save-dev karma
RUN npm install --save-dev karma-jasmine
RUN npm install --save-dev jasmine
RUN npm install --save-dev karma-phantomjs-launcher

share/shell/build_karma.sh

#!/bin/bash
source "/home/vagrant/share/shell/env.conf"

cd $path_Dockerfile_dir/karma && docker build -t $imageName_karma .

share/shell/karma_docker_start.sh

#!/bin/bash

# 設定ファイルの読込
source "/home/vagrant/share/shell/env.conf"

# 前回のkarmaコンテナが残っているかチェック。
docker ps -a | grep $containerName_karma >/dev/null 2>&1

# karmaコンテナが残っている場合は削除。
if [ $? -eq 0 ]; then
  docker rm -f $containerName_karma
fi

# コンテナの起動
docker run -it --name $containerName_karma --rm \
           -v $path_dev_dir:/usr/karma/share \
           $imageName_karma /bin/bash -c \
           'npm run-script tests -- ./share/karma/karma.conf.js'

share/dev/karma/karma.conf.js

module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    files: [ { pattern: './test/dist/*-spec.bundle.js', watched: true } ],
    frameworks: ['jasmine'],
    autoWatch: true,
    singleRun:false,
    logLevel: config.LOG_INFO,
    port: 9876,
    concurrency: Infinity
  }); 
};

ここまでのフォルダ構成

share
  - Docker
    - webpack
      - Dockerfile
    - karma
      - Dockerfile
  -shell
    - env.conf
    - build_karma.sh
    - build_webpack.sh
    - karma_docker_start.sh
    - webpack_docker_start.sh 
  - dev
    - webpack
      - webpack.config.js
      - configs
        - _base.js
        - karma.js
    - karma
      - karma.conf.js 
      - test
        + dist
        - spec
          - test-spec.js
        - source
          - test.js

mongodbとexpressの用意

expressは[前回][link-18]とさほど変わっていない。
mongodbは3.2を使用した。
mongodbのDockerfileは以下を参照
[docker-library/mongo][link-17]

ビルド用のシェルを作成。

share/shell/env.conf

#!/bin/bash

# 共有ディレクトリ
path_share_dir="/home/vagrant/share"

# docker用ディレクトリ
path_Dockerfile_dir="${path_share_dir}/Docker"

# 開発用ディレクトリ
path_dev_dir="${path_share_dir}/dev"

# dockerイメージファイル名(:タグ名)
imageName_karma="hibo/karma"
imageName_webpack="hibo/node_webpack"
imageName_express="hibo/express"
imageName_mongodb="hibo/mongodb"

# コンテナ名
containerName_karma="karma"
containerName_webpack="webpack"
containerName_express="express"
containerName_mongodb="mongodb"

share/shell/build_monogodb.sh

#!/bin/bash
source "/home/vagrant/share/shell/env.conf"

cd $path_Dockerfile_dir/mongodb && docker build -t $imageName_mongodb .

実行用のシェルを作成。
最初はDBの共有先をwindowsと共有しているフォルダに保存しようとしていたのだが、rename WiredTiger.wt to WiredTiger.wt.1: Text file busyなどと言われた。ファイルシステムを使用しているからという情報は得たが詳細は理解していない。
とりあえず、windowsと共有していないディレクトリを-vで指定している。

share/shell/mongodb_docker_start.sh

#!/bin/bash 

source "/home/vagrant/share/shell/env.conf"

# 前回のコンテナが残っているかチェック。
docker ps -a | grep $containerName_mongodb >/dev/null 2>&1

# karmaコンテナが残っている場合は削除。
if [ $? -eq 0 ]; then
  docker rm -f $containerName_mongodb
fi
docker run --name $containerName_mongodb --rm -it -p 27017:27017 -v /home/vagrant/DataBase/mongodb:/data/db $imageName_mongodb

つづいてexpressの設定

share/Docker/express/Dockerfile.

FROM node:5.4.0

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

#gulpfileを書き出し
RUN echo "var requireDir = require('require-dir'); requireDir('webapp/gulp/tasks', { recurse: true }); " > gulpfile.js 

#package.jsonを書き出し
RUN echo '{ "name": "node_express",  "scripts": { "start": "node webapp/bin/www", "gulp":"gulp" }}' > package.json

#タスクランナーインストール
RUN npm install --save-dev gulp 
RUN npm install --save-dev require-dir 
RUN npm install --save-dev gulp-if 
RUN npm install --save-dev gulp-livereload

#サーバーインストール
RUN npm install --save-dev express 
RUN npm install --save-dev body-parser 
RUN npm install --save-dev cookie-parser 
RUN npm install --save-dev debug 
RUN npm install --save-dev jade 
RUN npm install --save-dev morgan 
RUN npm install --save-dev serve-favicon 

# ウェブソケットインストール
RUN npm install --save-dev socket.io

# DBドライバインストール
RUN npm install --save-dev mongodb

share/shell/build_express.sh

#!/bin/bash 

source "/home/vagrant/share/shell/env.conf"

cd "${path_Dockerfile_dir}/express" && docker build -t $imageName_express . 

share/shell/expess_docker_start.sh

#!/bin/bash 

source "/home/vagrant/share/shell/env.conf"

# 前回のコンテナが残っているかチェック。
docker ps -a | grep $containerName_express >/dev/null 2>&1

# コンテナが残っている場合は削除。
if [ $? -eq 0 ]; then
  docker rm -f $containerName_express
fi

docker run --name $containerName_express --rm -it -p 80:3000 -p 35729:35729 \
      -v $path_dev_dir/myExpressGenerator:/usr/src/app/webapp \
      $imageName_express /bin/bash -c 'npm run gulp -- watch'

これで準備ができたので、tmux開始シェルも変更。

share/shell/tmux_start.sh

#!/bin/bash

# セッション名がなければ定義
if [ -n "$SESSION_NAME" ];then
  session=$SESSION_NAME
else
  session=dev-`date +%s`
fi

# ウィンドウ名を定義
window=development

### tmuxのセッションを作成
tmux -f /home/vagrant/share/config/tmux.conf new-session -d -n $window -s $session  

tmux send-keys "echo test1" C-m

#ウィンドウ作成
tmux split-window -h
tmux send-keys "./share/shell/karma_docker_start.sh" C-m

tmux split-window -h
tmux send-keys "./share/shell/webpack_docker_start.sh" C-m

tmux select-pane -t 2
tmux split-window
tmux send-keys "./share/shell/mongodb_docker_start.sh" C-m

tmux select-pane -t 4
tmux split-window
tmux send-keys "./share/shell/express_docker_start.sh" C-m

### 最初のpaneを選択状態にする
tmux select-pane -t 1

### セッションにアタッチ
tmux attach-session -t $session

シェルを変更したら./share/shell/tmux_start.shで起動。
mongodbとexpressの連携を試してみる。
myExpressGeneratorフォルダはexpress-generatorでスキャフォールディングしたものに追記。

share/shell/dev/myExpressGenerator/gulp/tasks/express.js

var gulp = require('gulp');
var spawn = require('child_process').spawn;
var server;

var livereload = require('gulp-livereload');

// ブラウザリロードタスク。
gulp.task('reload',function(){
     gulp.src(['webapp/public/*/*','webapp/views/*.jade'])
     .pipe(livereload());  
});

gulp.task('server',function(){
    if(server){
         //サーバーを終了
         server.kill('SIGKILL');
    }
     //サーバーを起動
     server = spawn('node',['./webapp/bin/www'], {stdio: ['pipe', process.stdout, process.stderr]});

});

gulp.task('watch',['server'],function(){
    // webapp配下のpublicフォルダを除くjsファイルが更新されたらサーバーを再起動
    gulp.watch(['webapp/**/*.js','!webapp/public/**/*.js'],['server']);


    // publicフォルダ以下のファイルかviewsのファイルを更新したらブラウザリロード
    livereload.listen();
    gulp.watch(['webapp/public/**/**', 'webapp/views/*.jade'], ['reload']);
});

expressのエントリーファイル。socket.ioの宣言しただけ。前回と変更なし。

share/dev/myExpressGenarator/bin/www.

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('myExpressGenerator:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Create websocket.
 */
var io = require('socket.io').listen(server);

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});


/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

app.jsではinsertへのルーティングを行う。

share/dev/myExpressGenarator/app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
var insert = require('./routes/insert.js');


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
app.use('/insert', insert);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

share/dev/myExpressGenerator/routes/insert.js

var express = require('express');
var router = express.Router();
var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');

var insertDocuments = function(db, callback) {
  // Get the documents collection
  var collection = db.collection('documents');
  // Insert some documents
  collection.insertMany([
    {a : 1}, {a : 2}, {a : 3}
  ], function(err, result) {
    assert.equal(err, null);
    assert.equal(3, result.result.n);
    assert.equal(3, result.ops.length);
    console.log("Inserted 3 documents into the document collection");
    callback(result);
  });
};

// Connection URL
var url = 'mongodb://192.168.50.10:27017/myproject';

/* GET insert. */
router.get('/', function(req, res, next) {
  // Use connect method to connect to the Server
  MongoClient.connect(url, function(err, db) {
    assert.equal(null, err);
    console.log("Connected correctly to server");

    insertDocuments(db, function() {
      res.send("insert!");
      db.close();
    });
  });
});

module.exports = router;

これでhttp://192.168.50.10/insertにアクセスするとインサートが実行される。
起動中のdbのdockerにログインして確認してみる。

share/shell/bash_mongodb.sh

#!/bin/bash 

source "/home/vagrant/share/shell/env.conf"

docker exec -it $containerName_mongodb /bin/bash

上のシェルスクリプトを実行するとdbのある場所のbashが表示されるので、mongoと入力。
mongodbのシェルが開かれる。
dbシェルでshow dbsと打ち込んで、myprojectのデータベースが追加されていることを確認。use myproject を入力し、dbの使用を宣言してからdb.documents.find()を確認することで、追加された項目を確認できる。

最後にフォルダの構造。

share
  - Docker
    + webpack
    + karma
    - mongodb
      - Dockerfile
      - docker-entrypoint.sh
    - express
      - Dockerfile
  -shell
    - env.conf
    - build_karma.sh
    - build_webpack.sh
    - karma_docker_start.sh
    - webpack_docker_start.sh 

    - build_mongodb.sh
    - build_express.sh
    - mongodb_docker_start.sh
    - express_docker_start.sh
    - bash_mongodb.sh
  - dev
    + webpack
    + karma
    - myExpressGenerator
      - gulp
        - tasks
          - express.js
      - app.js
      - bin
        - www
      - routes
        - index.js
        - insert.js
      + views
      + public

2016/2/4追記：webpackをgulpを使った構成に変更。

設定ファイル

share/shell/env.conf

#!/bin/bash

# 共有ディレクトリ
path_share_dir="/home/vagrant/share"

# docker用ディレクトリ
path_Dockerfile_dir="${path_share_dir}/Docker"

# dockerイメージファイル名(:タグ名)
imageName_gulp_webpack="hibo/gulp_webpack"


# コンテナ名
containerName_gulp_webpack="gulp_webpack"

ビルド用シェル

share/shell/build_gulp_webpack.sh

#!/bin/bash 

source "/home/vagrant/share/shell/env.conf"

cd "${path_Dockerfile_dir}/gulp/webpack" && docker build -t $imageName_gulp_webpack . 

Dockerファイル

share/Docker/gulp/webpack/Dockerfile.

FROM node:5.5.0

WORKDIR /usr/local/src

#package.jsonを書き出し
RUN echo '{ "name": "my_webpack","scripts": {"build": "webpack", "gulp":"gulp"} }' > package.json

RUN npm i -D webpack
RUN npm i -D babel-core babel-preset-es2015 babel-preset-react
RUN npm i -D eslint
RUN npm i -D pre-commit precommit-hook
RUN npm i -D lodash
RUN npm i -D react

RUN npm i -D eslint-loader
RUN npm i -D babel-loader
RUN npm i -D css-loader
RUN npm i -D react-hot-loader
RUN npm i -D style-loader

RUN npm i -D require-dir 
RUN npm i -D gulp
RUN npm i -D babel-register

# babelで使用するpresetsの書き出し
RUN echo '{"presets": ["es2015", "react"]}' > .babelrc

#gulpfileを書き出し
RUN echo "var requireDir = require('require-dir'); requireDir('share/dev/gulp/webpack', { recurse: true }); " > gulpfile.babel.js 

RUN mkdir -p /usr/local/src/share

share/shell/gulp_webpack_docker_start.sh

#!/bin/bash 

source "/home/vagrant/share/shell/env.conf"

# 前回のコンテナが残っているかチェック。
docker ps -a | grep $containerName_gulp_webpack >/dev/null 2>&1

# コンテナが残っている場合は削除。
if [ $? -eq 0 ]; then
  docker rm -f $containerName_gulp_webpack
fi

docker run --name $containerName_gulp_webpack --rm -it -v $path_share_dir:/usr/local/src/share $imageName_gulp_webpack  /bin/bash -c \
           'npm run-script gulp'

gulpファイル

share/dev/gulp/webpack/task.js

var gulp = require('gulp');
var spawn = require('child_process').spawn;

gulp.task('default', ['webpack', 'watch']);

gulp.task('webpack',function(){
  spawn('npm',['run-script', 'build', '--', '--config', './share/dev/webpack/webpack.config.js', '--progess', '--colors'], {stdio: ['pipe', process.stdout, process.stderr]});
});

gulp.task('watch',['webpack'],function(){
  gulp.watch('./share/dev/karma/test/spec/*.js', ['webpack']);
});

webpack設定ファイル

share/dev/webpack/webpack.config.js

require('babel-register');
module.exports = require('./configs/karma');

karma用設定（変更なし）

share/dev/webpack/configs/karma.js

import base from './_base';
import path from 'path';
import fs from 'fs';
export const src = path.resolve(__dirname,  '../../karma/test/spec');
export const dist = path.resolve(__dirname, '../../karma/test/dist');

var entry_point = {};

var keys = fs.readdirSync(path.resolve(__dirname,'../../karma/test/spec'));
keys.forEach((elm,idx)=>{
  //-spec.jsで終わるjavascriptファイルだけをエントリーポイントに登録
  if( /-spec\.js$/.test(elm) ){
    entry_point[elm.replace(".js","")] = "./"+elm;
  }
});

const webpackConfig = Object.assign(base, {
  context:src,
  entry: entry_point,
  output: {
    path: dist,
    filename: '[name].bundle.js'
  }
});

export default webpackConfig;

フォルダの構造。

share
  - Docker
    + webpack
    + karma
    + mongodb
    + express
    - gulp
      - webpack
        - Dockerfile

  - shell
    - env.conf
    - gulp_webpack_docker_start.sh
    - build_gulp_webpack.sh

  - dev
    + webpack
    + karma
    + myExpressGenerator
    - gulp
      - webpack
        - task.js

参考サイト

[terminal multiplexer][link-8]
[達人に学ぶ.tmux.confの基本設定][link-4]
[tmux基本のコマンド][link-5]
[ターミナルマルチプレクサ tmux をカスタマイズする][link-7]
[tmuxで複数サーバの同時オペレーション][link-1]
[tmuxを使い始めたので基本的な機能の使い方とかを整理してみた][link-6]
[tmuxを起動できなくなったこととその対処の備忘録][link-2]
[達人の設定を継承させてもらった][link-3]
[webpack configure][link-9]
[webpackのconfig][link-12]
[Web開発の未来 – React、FalcorおよびES6][link-10]
[regexp][link-11]
[node.js doc fs][link-13]
[node.js doc spawn][link-14]
[node-mongodb-native][link-15]
[docker mongo][link-16]

[Babelを6系にアップデートしたらgulpでこける][link-19]
[gulp-webpack で複数 JS の書き出し Tips][link-20]
[gulp][link-21]
[ReactRadarScope][link-22]

[link-1]:http://tech.naviplus.co.jp/2014/01/09/tmux%E3%81%A7%E8%A4%87%E6%95%B0%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E5%90%8C%E6%99%82%E3%82%AA%E3%83%9A%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3/
[link-2]:http://qiita.com/takc923/items/018733112963b69b408b
[link-3]:http://raichel.hatenablog.com/entry/2015/08/02/185018
[link-4]:http://qiita.com/succi0303/items/cb396704493476373edf
[link-5]:http://room6933.com/mymemo/tmux/tmux-basic.html
[link-6]:http://kanjuku-tomato.blogspot.jp/2014/02/tmux.html
[link-7]:http://qiita.com/b4b4r07/items/01359e8a3066d1c37edc
[link-8]:http://www.openbsd.org/cgi-bin/man.cgi/OpenBSD-current/man1/tmux.1?query=tmux&sec=1
[link-9]:https://webpack.github.io/docs/configuration.html#watchoptions-aggregatetimeout
[link-10]:http://postd.cc/future-of-the-web-react-falcor/
[link-11]:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
[link-12]:http://yokotakenji.me/log/programming/js/webpack/4315/
[link-13]:https://nodejs.org/api/fs.html
[link-14]:https://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options
[link-15]:https://github.com/mongodb/node-mongodb-native
[link-16]:https://hub.docker.com/_/mongo/

[link-17]:https://github.com/docker-library/mongo/tree/fcb9584617e63f1d3db8dc730fb8abb83653c7ad/3.2
[link-18]:http://qiita.com/hibohiboo/items/fb977fe8ce08ab390bd7

[link-19]:http://qiita.com/sawapi/items/e11d0cfbbacd078b2c3a
[link-20]:http://2no.hatenablog.com/entry/2015/06/08/170511
[link-21]:https://github.com/gulpjs/gulp/blob/master/docs/API.md
[link-22]:https://github.com/jirokun/ReactRadarScope