Grunt・AngularJS・yo・coffeescriptでモダンなウェブアプリのひな形を一撃作成!

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 173 follow us in feedly

まえがき

んーまたけっこうブログの更新頻度が落ちてきております私です。最近は主にサーバーサイドや、インフラよりなお仕事が多い私ですが、最近のクライアントサイドがものすごく面白そうなので遊んでみました。遊ぶだけのつもりが個人的にものすごい収穫になりましたのでメモしておこうと思います

やりたいこと・やること

  • AngularJSの開発環境を構築したい!
  • JavascriptはCoffeeScriptで書きたい!
  • CSSももちろんSASS・SCSSで書きたい!
  • coffee -> jsなどのビルドをタスクに起こしてコマンド一発!・さらには自動化したい(ファイル更新したらビルドRunみたいなのとか)
  • js・cssなどのassetsデータは圧縮・最適化することでファイル容量を小さくしたい!

みたいなこと、なんともわがまま構成ですが簡単に作成することが出来ました!!!!!!

開発環境

  • OS MacOSX
  • NodeJS 0.10.26

NodeJSは事前にインストールされていること・npmを使ってパッケージ管理ができる・npmのパッケージにパスを通してコマンドが実行できる状態にしておく必要があり、そういった用意は済んでいることを想定して以下進めていきます。

とりあえず必要なnpmパッケージをザクッとインストール

以下のファイル『package.json』を保存して、必要な物を一気にインストールする

{
  "name": "package.json",
  "version": "0.0.1",
  "description": "awesome",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "author": "keitarou",
  "license": "BSD",
  "gitHead": "85b2a7b00d4193f1489a975e127cd5069e26f5c1",
  "readmeFilename": "README.md",
  "dependencies": {
    "jade"                  : "1.3.1",
    "grunt"                 : "0.4.1",
    "grunt-contrib-watch"   : "0.4.4",
    "grunt-contrib-coffee"  : "0.7.0",
    "grunt-contrib-concat"  : "0.1.3",
    "grunt-contrib-uglify"  : "0.1.2",
    "grunt-contrib-compass" : "0.9",
    "grunt-contrib-jasmine" : "0.4.2",
    "grunt-contrib-clean"   : "0.4.1",
    "yo"                    : "1.2.0",
    "generator-angular"     : "0.9.5",
    "bower"                 : "1.3.8"
  }
}

明らかに今回必要ではないもの。あとでどうせインストールされるもの、が含まれていると思うが、そこは目をつむるか手探り最適な状態にして欲しいです。。。各パッケージのバージョンに関しては最新のもので固定してたり・他のブログさんからコピってきたものとかあるのであれです。

npm install -g

『-g』オプションでインストールしてきました。nodeJS 0.8系で最初試していましたが、インストールできなかったものがあったので10系のほうがおすすめです。

ちょこっとパッケージの説明

  • grunt: いわずもが、今WEBのクライアント開発で絶大的な人気と性能をほこるGruntさん。メタ言語のビルドやら、ファイル更新をフックして、ビルド走らせたり色々便利。『grunt-xxx』系はそのGruntのエクステンションみたい。
  • jade: coffeescriptのHTML版みたいなやつ。テンプレートエンジンってゆわれているのかな?RubyのHamlのnode版という解釈してます。(今回は使っていません。そもそもこれはあまり好きではない。)
  • yo: 今回の主役。いろいろなWEBのひな形をざくっとつくってくれる。スーパースター。
  • generator-angular: yoさんでangularJSのひな形を作るエクステンション
  • bower: Javascriptのライブラリ管理ツール。

yoでAngularJSのひな形作成

以下のコマンドを実行するだけでできあがり!

mkdir sample
cd sample
yo angular --coffee

対話的にちょこっと色々聞かれるが、用途に合わせて選択してください。

※注意 コマンド実行時にカレントディレクトリにプロジェクトのひな形を作るので新しくディレクトリ作成して、その中で実行するのがいいです。

ビルドしてWEBページを確認

ビルドしてWEBで開く

grunt server

grunt-angularjs

ビルドするだけ

grunt build

デフォルトの状態では『dist』ディレクトリ以下にビルド後のコードが作成されます。

あと、grunt serverでサーバーを起動中に、ソースコードを変更すると自動で再度ビルドが走ってブラウザのリロードまでやってくれます。すげぇ・・

おすすめ書籍

AngularJSアプリケーション開発ガイド
Brad Green Shyam Seshadri
オライリージャパン
売り上げランキング: 25,092

関連記事

no image

CoffeeScriptの基本的な書き方のメモ

まえがき よし、これからはCoffeeScriptでガリガリ書いていく...

記事を読む

Screeny-Shot-2013-08-11-21.40.56.pngScreeny-Shot-2013-08-11-21.40.56.png

AlloyでFacebookアプリっぽいスライドメニューを実装してみる

まえがき AlloyでFacebookとかでよく使われている左からビュ...

記事を読む

AngularJSで作るChrome拡張の雛形リポジトリを作っておいた。

まえがき 最近、GoogleChromeの拡張機能と、AngularJ...

記事を読む

no image

Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話

まえがき slideshareにて初のスライドを投下してみたのでご報告...

記事を読む

Screeny-Shot-2013-08-10-10.08.55.pngScreeny-Shot-2013-08-10-10.08.55.png

CoffeeScriptの環境設定をするの巻

まえがき さて、そろそろCoffeeScriptでjsを書きたいなと...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑