bower + gulp + karma とかその辺を始めようと思い、とりあえずプロジェクトのテンプレを作りました。

最近ずっと新しいものい触れていなかったため、疎いです！　指摘があればよろしくお願い致します。

これから作るテンプレは、npm以外すべてプロジェクト内にローカルインストールする形で進めます。

プロジェクト内で使用するnpm以外のライブラリ( bowerとかkarmaとかgulpとか )がプロジェクトごとに分離してる感じです。

無駄じゃぼけ、って言われるかもしれませんが、バージョンが保証されない環境で自分が痛い目に遭ってきたためこのような構成にしてます。
( いや、やっぱり無駄かも )

ゴールとしては、以下の手順で環境が整う状況です。

テンプレートのリポジトリをクローンする。
npmインストールなどの実行と、パスを通す( ローカルインストールしたもののバイナリの。 )処理が集約したスクリプトを回す。
みんなと全く同じ環境( package.json, bower.json の記述にもよるが... )のできあがり！

では、つらつらと行った手順を書いてきます。
なお、bower,gulp,karma を入れた手順を紹介します。

gitの設定

git init しちゃいます。

  git init

.gitignore書いちゃいます。

  #.gitignore内に記述
  node_modules
  bower_components
  # その他適宜必要なもの...

npm による各ライブラリのインストール

npm の初期化

npmのプロジェクト毎の設定が書いてあるpackage.jsonを生成する

  npm init

bower のインストール

bower をローカルインストールします。

  npm install bower --save

　　npmでローカルインストールを行うと、各ライブラリの実行ファイルは以下に配置されます。

  node_modules/.bin

　+ このままだとbowerコマンドが使えないので、パスを通してあげる必要があります。
　そのため、npmのインストールも含めたスクリプト( init.sh )を作成します。

  # init.sh に記述

  echo "initializing..."
  # npm によるインストール
  npm install 
  # パスを通す
  DIR=$(cd $(dirname ${BASH_SOURCE:-$0}); pwd)
  PATH="$PATH:$DIR/node_modules/.bin"
  export PATH
  # bower によるインストール
  bower install

  echo ".....finished!"

npmインストールとかも入っちゃってますが、このスクリプトを実行してみて、bowerコマンドが使えるかどうかチェックしてみてください。　ちなみに、 init.sh を実行するときは、 export が含まれているので sourceコマンドで実行する必要があります。

  source init.sh

gulp・karma連携 ( メインとはもう関係ない )

例のごとくこいつらもローカルインストールします。(すべて本番環境にもインストールするようになっちゃってるのでそこは適宜お願いします！)

  npm install gulp --save
  npm install gulp-karma --save
  npm install karma-cli --save
  npm install karma-jasmine --save
  npm install karma-chrome --save # とりま chromeだけ

それぞれ設定ファイルを生成しましょう。

  karma init

gulp.js に設定を記述(新規作成)

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

  var testFiles = [
    // 必要なライブラリなど...
    // ...
    // 自分のJSファイルなど...
    'assets/js/*.js', // あくまでも例
    // テストファイル
    'tests/*.js' // あくまでも例
  ];

  gulp.task('karma', function(){
      return gulp.src(testFiles)
        .pipe(karma({
            configFile: 'karma.conf.js',
            action: 'run'
        }));
  });

テストを作って、実行しましょう。
自分の決めた場所にテスト対象のJS、テストコードを置き、チェックしてみましょう。

  gulp karma

これでテスト結果が正常に表示されればOKです。

cloneから最後まで試してみる

先ほど作ったプロジェクトをどこかにpushしましょう。

  git add .
  git commit "テンプレ作成"
  git push どこか master

別のフォルダで、cloneしてきましょう

  git clone どこか

クローンしてきたプロジェクトで、例のスクリプトを実行しましよう

  source init.sh

これで、gulp karma などのコマンドが動けばOKです！

書いていて思ったこと

　最後まで書いて気づいたのは、全部ローカルインストールにする意味ってやっぱないのかなと笑
　もっとどんなケースがあるかを把握して、その辺をうまく使い分けられるようになりたいな、と。
まぁ、練習ですわ！

npm以外プロジェクト内で完結させたWeb開発環境を作る(npm以外ローカルインストール)