新規プロジェクトでシングルページアプリを作るさいの環境構築メモ（私用）

はじめに

完全に自分用のメモになってしまうが、、、

さくらのレンタルサーバでのfuelphpセットアップ手順 - とりあえずphpとか
こちらのfuelphpのときと同様で直近の案件のコピーしてくるやり方をなるべくやめようと思って自分なりにまとめることにしました。
いちおうnode.jsは入っている前提で進めます。

使いたいもの

onsenui（＋angularjs）

uiをアプリっぽくしたいのでonsenuiを最近つかってます。
onsenuiを使う場合はangularjsも必要になります。

grunt関連

gruntとかあまり詳しくないけど使ってみたら意外と便利なのでとりあえず使ってます。手動でやると面倒くさい作業を自動化してくれるメリットがあります。

＞grunt-contrib-concat
分割しておいているjavascriptファイルをコマンドをたたいて1ファイルにまとめてくれるというツールです。
サーバサイドの開発してると機能ごとにファイルを分けて開発することが多いのですがjavascript開発でもそうしようとしたとき、すべてのファイルを読み込むとかしなくてもこれを使って1ファイルにまとめておけば1ファイル読み込めばokというわけです

＞grunt-contrib-watch
grunt-contrib-concatのを自動で行ってくれるツールです。というと嘘なんですけど、自分は主にこの用途で使ってます。
各javascriptファイルを編集するたびに1つにまとめるためにコマンドをたたくのはさすがに面倒ですがこれを使うとjavascriptファイルに変更が
あれば勝手に1つにまとめてくれます。

＞grunt、grunt-cli
上の2つ使うのに必要なので入れます

angular.js関連

angularjsも色々プラグインあるみたいですが、とりあえず今必ず使うものは最初に入れておきます。

＞angular-route
javascriptでページ遷移を簡単に実現できるプラグインです。

＞angular-resource
上手く説明できないけど、、、ajax通信するときに便利なので使ってます

＞angular-cookies
cookie使うのに必要

＞grunt-angular-templates
これを使うとjavascriptとhtmlをファイル分割して管理できます。まぁhtmlの中にjavascriptがごちゃごちゃ書いてあると後々みずらくなるのでこれを使います。

それぞれインストールする

onsenui（+angularjs）をインストールする

cd ~/work
npm install bower # onsenuiをインストールするために必要
./node_modules/bower/bin/bower install onsenui # onsenui + angularjsをインストール

なんとなくグローバルにインストールするのが好きでないためローカルにインストールすることにしています。
実行するとしたらこんなかんじのディレクトリ構成になります

work
├── bower_components
│ ├── angular
│ └── onsenui
└── node_modules
└── bower

gruntとangularjs関連のプラグインのインストール

順番にコマンドたたいていくだけです。ちなみにnpmというのはnode.jsいれると使えるようになります。

# grunt関連
npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-watch
npm install grunt-angular-templates

# angularjs関連
./node_modules/bower/bin/bower install angular-route
./node_modules/bower/bin/bower install angular-cookies
./node_modules/bower/bin/bower install angular-resource

これらを実行するとさらに以下のようなディレクトリ構成になります
work
├── bower_components
│ ├── angular
│ ├── angular-route
│ ├── angular-resource
│ └── onsenui
└── node_modules
├── bower
├── grunt
├── grunt-angular-templates
├── grunt-cli
├── grunt-contrib-concat
└── grunt-contrib-watch

Gruntfile.jsを作成する

gruntを挙動を定義するファイルです。僕のgruntの用途は前述した複数のjavascriptファイルをまとめるくらいなので簡単ですがサンプルをのせておきます。ディレクトリ構成は自分の好みの構成なのであまり気にしないでください。

module.exports = function (grunt) {
    grunt.initConfig({
        // 複数ファイルを1ファイルにまとめる設定（この例だとapp.jsというファイルにまとめられる）
        concat: {
            '../public/assets/js/app.js': [
                //以下のファイルがまとめられる
                'www/main.js',
                'www/views/*.js',
                'www/models/*.js',
                'www/config/*.js',
                'www/controllers/*.js',
            ]
        },
        // angularjsでhtmlとjavascriptファイルを分離するための設定
        ngtemplates: {
            App: {
                src: [
                    'www/views/*.html',
                ],
                dest: 'www/views/templates.js'
            }
        },
        // ファイルを監視して編集があったら自動でまとめるための設定
        watch: {
            js: {
                files: [
                   'www/*/*.js',
                    'www/main.js',
                    'www/views/*.html',
                ],
                tasks: [
                    'concat',
                    'ngtemplates'
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-angular-templates');
    grunt.loadNpmTasks('grunt-contrib-watch');

};

で、gruntコマンドして監視を開始します

./nodejs/node_modules/grunt-cli/bin/grunt watch

とりあえず開発に入る前にいつもやる設定はこれくらいかな。

自分の場合はfuelphpで開発してるので、以下の作業も続けてやってます
bowerでインストールしたライブラリをfuelphpで使う方法(メモ) - とりあえずphpとか

以上です