新規プロジェクトでシングルページアプリを作るさいの環境構築メモ(私用)
はじめに
完全に自分用のメモになってしまうが、、、
さくらのレンタルサーバでの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とか
以上です