ウェブデザイナーがはじめる AngularJS シリーズウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

はじめに

AngularJSのAnnotetionをしっかり指定していれば問題になりませんがAnnotationを指定する方法は煩雑です。Angular Styleguideに則った記述をしている場合、annotationを指定せずng-annotateを使ってコンパイル時に自動でannotateするよう推薦しています。

MiddlemanでAngularJSを使っている方がどれぐらいいるかわかりませんが、Middlemanのminify_javascriptを有効化しているとAngularJSがMinifyされinjectorが正しく動作しなくなります。そこでMiddlemanではmiddleman-ngannotateモジュールを使います。

似たものでmiddleman-ngminがありますがこちらはdeprecatedされていて動かないので注意してください。

インストール

Gemfileにmiddleman-ngannotateを追加し$ bundle installします。

gem 'middleman-ngannotate'

有効化

config.rbでmiddleman-ngannotateを先に有効化し合わせてMinifyも有効化します。

configure :build do
  activate :ngannotate
  activate :minify_javascript
end

これで自動的にannotationが追加されMinifyできるようになります。
以上小ネタの紹介でした。

シリーズ

1. AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ
2. ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる
3. ウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に
4. ウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境
5. ウェブデザイナーがはじめるAngularJS：ngRouteを使ったシンプルなViewの切り替え
6. ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識
7. ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス
8. ウェブデザイナーがはじめるAngularJS：DOM操作系ディレクティブを試す
9. ウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す
10. ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理
11. ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する
12. ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策
13. ウェブデザイナーがはじめるAngularJS：コントローラ間の連携
14. ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap