こんにちは。 田中(邦)です。

これまでに下記4つの記事を公開してきました。

VagrantとMongoDBで始める、Padrino入門 -開発環境構築編

VagrantとMongoDBで始める、Padrino入門 -開発編 OmniAuthを利用したソーシャルメディア認証-

VagrantとMongoDBで始める、Padrino入門 -開発編 Amazon SQSとSNSを使ったプッシュ通知の実装-

VagrantとKali Linuxを使ってウェブサービスの脆弱性をテストしよう

今回はGrunt.jsを利用したAssetsのPrecompileについて書いていきたいと思います。

プロジェクトはこれまで利用してきたものをそのまま使います。

Grunt.jsとは

Grunt.jsとはCLIで動くタスクランナーです。

http://gruntjs.com/

オフィシャルサイトを見ると”The JavaScript Task Runner” とデカデカと書いてあります。

Grunt.jsを使えばビルドやらテストやら色々とできるのですが、今回はこのツールを使って下記のタスクを実行します。

  • Compass + Sassなファイルをコンパイル
  • 出力されたCSSのMinify
  • Coffee Scriptのコンパイル
  • 生成されたJava Scriptのconcat(結合)
  • Javascriptのminify

Padrinoには最初からcompassを使ってSassファイルをコンパイルする仕組みがあったり、

RailsのAssets Pipline的な外部ライブラリもあるようですが、色々試してみた結果使い勝手がイマイチだったりしたのでGrunt.jsを使うことにしました。

インストール

まずは必要なものをインストールします。

Node.jsで動くのでまずはそこからインストールしていきましょう。

nvm

今後を考えてNode.jsのバージョンを簡単に切り替えることができるようにnvmをインストールします。

https://github.com/creationix/nvm

Readmeに従ってこちらのスクリプトを実行します。

これだけでnvmのインストールは終わりです。

Node.js

nvmからNode.jsをインストールします。


nvm install v0.10.26
 nvm use v0.10.26
 nvm alias default v0.10.26
 node -v

Grunt.js

npmを使ってインストールします。


npm install -g grunt-cli

各種設定

必要なツールのインストールが終わったので、設定ファイルを作成していきます。

package.json

まずプロジェクトの情報や必要な依存関係を定義したファイルであるpackage.jsonを作成します。

Padrinoプロジェクトのルートディレクトリに移動し、下記コマンドを実行します。


npm init

プロジェクトの名前やバージョン、ライセンスの形態など色々と聞かれますので適宜答えていくことでひな形が生成されます。

生成できたらこちらのファイルのようにdevDependenciesを追加してください。

Gruntfile.coffee

こちらも同じくプロジェクトルートに作成します。

Gruntfile.coffeeという名前で下記ファイルを配置してください。

https://gist.github.com/kunihiko-t/9183979

assets_config.rb

Gruntfile.coffeeでcompassの設定ファイルとしてassets_config.rbを指定したのでこのファイルにCompassを利用時の設定を書きます。

https://gist.github.com/kunihiko-t/9184208

動かす

ここまでできたら実際にファイルを置いて動かしてみます。

プロジェクトルート直下にassetsというディレクトリを作成しこのような構造になっているとします。

assets_tree

この状態で下記コマンドを実行すると


bundle exec grunt

output1

output2

こんな感じでjsとcssが出力されます。

開発中はstyle.css使って、本番環境ではminのほうを使えばminify済みのものが読み込まれます。

coffeeファイルやscssファイルを変更する度にいちいちbundle exec grunt するのがめんどくさければ


bundle exec grunt watch

しておけばファイルの更新を自動的に検出してタスクを動かしてくれます。

参考までにgithubに今回作成したものをpushしておきました。

https://github.com/kunihiko-t/padrino_sample_4


こんばんは、キャスレーコンサルティングSI部の反田(そった)です。

今回はRuby製のストリーム指向のストレージのDripを使って自前のWikiを作成します。

(続きを読む…)


こんにちは。田中(邦)です。

前回で開発環境の構築が完了したので、実際に開発していきましょう。

今回は

  • Twitter, FacebookのOAuth利用認証機能(OmniAuth利用)

について解説します。

(続きを読む…)


こんにちは、田中(邦)です。

2つ、3つほどの記事に分けて、Sinatraをベースに開発されたフレームワークであるPadrinoについて書こうかなと思います。

今回はMac(OS X 10.8.5)上でVagrantを使って仮想マシンを起動し、Ruby、PadrinoMongoDBをインストールしてGithubにソースコードをpushするところまでを解説したいと思います。

(続きを読む…)


Sinatraであそぶ

Posted on 10月 09, 2013

こんにちは、キャスレーコンサルティングSI部の反田(そった)です。

今回はRubyの軽量WebアプリDSLといわれるSinatraを紹介します。 (続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ