albatrosary's blog

UI/UXとエンタープライズシステム

grunt

gruntを使おう 〜 Application Cacheのmanifestファイルを自動メンテナンスする 〜

Application Cacheのmanifestファイルをメンテナンスするのは意外と面倒です。gruntタスクを定義するとこういう面倒なことから解放されます。Application Cacheはダメだというブログもありますが、ダメだブログも参考にしつつ私は普通に使ってます。 Applica…

黒い画面使わなくたってGruntイケル! 〜 Chromeを拡張するかっこいい(と思うんだけど)「Grunt Devtools」〜

WebデザイナーやWeb開発入門者にとって黒い画面は超難易度が高いというお話をお聞きします。よくYEOMANのお話をさせて頂いているのですが、そのときでも「黒い画面は・・・」という声が多数寄せられましたので「じゃー」ということで色々調べてみました。 Ch…

gruntを使おう 〜 CoffeeScriptもlintっちゃうyo 〜

CoffeeScriptを使う機会が増えましたが、コーティングルールを書いて周知させるのも面倒なのでlintしちゃいたいと思うんですが、そんなときに使用するのがgrunt-coffeelintです。 インストール npm install grunt-coffeelint --save-dev Gruntfile.jsの読み…

gruntを使おう 〜 SASSをドキュメント化するyo 〜

CSSでのコーティング量も増えCSS Preprocessorを使う機会も増しSASSを利用しています。そんなときに使用するのがgrunt-styleguideです。 インストール npm install grunt-styleguide --save-dev Gruntfile.jsでの読み込み grunt.loadNpmTasks('grunt-stylegu…

gruntを使おう 〜 もしgruntタスクを動かしたときにエラーになったら 〜

gruntタスクを実行していてプラグインがエラーになったらどうしますか?多分みなさん次の対策をとるでしょう。 ググって問題解決する ググっても駄目なときエラーを自力で修正する とりあえず途方に暮れる 現時点でgrunt-connect-proxyがエラーになりました…

gruntを使おう 〜 CoffeeScriptをドキュメント化するyo 〜

JavaScriptでのコーティング量も増えaltJSを使う機会も増しCoffeeScriptを利用しています。そんなときに使用するのが grunt-codo です。 インストール npm install grunt-codo --save-dev Gruntfile.jsでの読み込み grunt.loadNpmTasks('grunt-codo'); 使い…

gruntを使おう 〜 JavaScriptをドキュメント化するyo 〜

JavaScriptでのコーティング量も増えJavadoc同様ソースコードからドキュメントを作成する機会が増えています。そんなときに使用するのが grunt-contrib-yuidoc です。 インストール npm install grunt-contrib-yuidoc --save-dev Gruntfile.jsでの読み込み g…

gruntを使おう 〜 ファイルの内容を変えるプラグインだyo 〜

gruntを使ってリリースモジュールを作成する際にまれにindex.htmlとかファイルの内容を変えたいときがあります。たとえば index.htmlにモック開発時のテストコードが入っているが本番では利用しない 本番のディレクトリ構成が特殊でリリース時に<script src="scripts/main.js">を変更したい…

Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発

Single-page Application(SPA)によりフロント開発にかかる手間が膨大になっています。SPAの開発をするときに通信部分(JSONやJSONPなど)をどうすればいいのかが問題になります。解答としてはスタブAPIサーバを作成し対応します。 画面開発するためにアプリ…

CSS に対する継続的インテグレーションについて

HTML5の膨大な CSS をどうやってメンテナンスするか jsCafe に参加する機会があり、styledocco についてお話が聞けましたのでまとめます。HTML5 になり CSS の役割が多くなったことは言うまでもありません。膨大な CSS をどうやってメンテナンスするかが課題…

grunt を利用するためのメモ

これはオリジナルの grunt タスクを作成するための簡単なメモです。入門の中でも一番最初に理解すべき事柄を記載します。 この内容は 2013/10/26 に行われた HTML5ハッカソンの内容を記載しています。 必要なもの 前提条件として grunt の実行環境(npm や n…