package.jsonをどう書けばいいのかよくわからない・・・。jade, coffee-script, stylusだけをgitで管理し、gruntでビルドしたjs, css, bower_componentsとかは、gitで管理する必要がない。流れ的には下記の通り。 jade, stylus, coffee-scriptで開発。 gruntで更新ファイルを監視し、jadeはcopy、stylusはcssへ、coffee-scriptはjsへ。 gitで管理するのは、1.のファイルたち。 Herokuへdeploy。 gruntが実行して、1.のファイルたちが2.になってサーバーが動く。 この流れに行き着くまでに色々理由がある。 coffeeファイルでNode.jsを動かしてもいいが、syntaxerrorが事前にわかりにくい。 → grunt-coffeelintで文法チェックをする → 文法チェックしても動くかどうかはわからない。 → やっぱりjsファイルにしてから動作確認したい。 grunt-autoprefixerを使えば、-webkit, -mozなどを書かなくても保管してくれる。 → stylusには効かない。 → stylusからcssに変換してからautoprefixerを掛ける。 Herokuへdeployするにはgitで管理しているファイルに限る。 → gruntで書きだしたファイルをgitで管理する?いやそれはない。 → gruntで書きだす前のファイルをgitで管理しないと意味がない。 Herokuへdeployする時にgruntを動かしたい。 → 方法としては、package.jsonのscriptにpostinstallを追記する。 → または、Herokuが提供しているbuildpackを使ってgruntを叩くようにheroku configで設定をする。 4.の項目に関して、具体的なpackage.jsonは下記の通り。 package.json 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

続きを読む

Titaniumでアプリを開発する言語はJavaScriptです。ということは、Coffee-Scriptで開発をしたいですよね。そして、Coffee-Scriptで書かれたファイルが更新されたら、自動的にビルドして、iOSシミュレーターが自動的にリロードしてほしいですよね。TiShadowとGruntを使えば、そんな願いを叶えてくれます。また、TDD(Test Driven Development)やBDD(Behavior Driven Development)を実施することもできます。 TiShadowのインストール npmでインストールするのと、iOSシミュレーターとAndroidエミュレータに、TiSharowをインストールする必要があります。両方共簡単です。 command 1 $ npm install -g tishadow インストールが完了したら、tishadow server とコマンドを打ってください。このコンソール画面は、サーバーが起動していますので、ウィンドウは閉じないでください。 command 1 2 $ tishadow server [DEBUG] TiShadow server started. Go to http://localhost:3000 たぶん、localhostにアクセスしてと、メッセージが出ると思います。 実際にアクセスしてみて、このような画面が出ればOKです。今回は、この画面は使いません。 次に、GithubにあるTiShadowのページからファイルをcloneします。zipをダウンロードしても構いません。 https://github.com/dbankier/TiShadow この中にある、appフォルダーの中に移動して、アプリをビルドします。 command 1 2 3 4

続きを読む

スマートフォンサイトを大量に作る案件があったので、自分の作業用Gruntfileを作ったので晒します。 最大のミソはgrunt-syncというものです。 PCとスマホが同じWifiに接続されていれば、ブラウザの動作をsyncしてくれます。 つまり、PCで作業し、PCのブラウザがLive Reloadすれば、スマホのブラウザも自動でリロードしてくれるので、 表示確認の為にアップロードをする必要もなく、各端末を触ってリロードボタンを押すこともなく、 iPhoneだろうがAndroidだろうが関係なくサクサク制作ができるわけです。 AdobeのEdge Inspectみたいなことができるってことですね。 Edge Inspectは使ってみましたが、スマホに専用アプリをインストールしなければならなかったりするので、 会社の方針などで自由にインストール出来ないとかあれば、Gruntのほうが自由度高いと思います。 自分の場合はよく接続が切れたりしてたのでやめました。 package.json 自分はjadeとstylusとcoffee-scriptが好きなので、主にこれらで制作する前提になってしまいます。他のパッケージは好みで追加や削除してください。 package.json 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

続きを読む

grunt自体がNode.jsで動いてるんでややこしいですが、Node.jsでアプリケーションを開発している時、foreverとかnode-devを使って、更新ファイルがあれば再起動してブラウザをリロードして確認すると思います。gruntがあるならサーバーの再起動もブラウザのオートリロードもできるやろ!と思って作りました。 Qiitaにも投稿しました。 はじめに Node.jsをExpressで作る際に、app.js, routes, jade, stylus, publicの中にあるファイルなどを更新した際に、serverがrestartしてブラウザもreloadされる。ようなGruntfileを作りました。まぁまぁ開発が早くなるんちゃうかと思います。 環境 Node.js v0.10.26 Express v3.0.0 node-supervisor テンプレートはJadeを使ってます。 CSSは、stylusからCSSを書き出してます。その際に、ベンダープレフィックスを追加するautoprefixerが動いてます。 JavaScriptファイルは全てcoffeeで書きます。 vendorsフォルダーは、distにコピーしているだけです。 Nodeプロセス node-supervisorを使って起動しますので、npm install -g node-supervisor してください。 ファイル構成 . ├── Gruntfile.coffee ├── app │ ├── app.coffee │ ├── bin │ │ └── www │ ├── public │ │ ├── images │ │ ├── javascripts │ │ └── stylesheets │ ├── routes │ │ ├── index.coffee │ │ └── user.coffee │ └── views │ ├── error.

続きを読む

あけましておめでとうございます。新年を迎えるたびに、ブログの継続を意気込むものの3日足らず3時間で挫折してしまいますが、今年も宜しくお願いいたします。 さて、昨年末にGruntファイルを1つ作ってみました。ぐぐればたくさんサンプルがありますが、jade、stylus、coffeeをビルドするgruntファイルが無かったので、自分で作りました。 良かったら使ってみてください。詳しくはQiitaに投稿しましたので、こちらを御覧ください。

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo