gruntで環境構築している際に、デバッグ文の出力内容を環境変数で制御するモジュールを見つけたので紹介します。 https://github.com/visionmedia/debug せっかくなので、デバッグ用に新規タスクを用意して検証してみましょう。 新規タスク用のディレクトリ…

yeomanのgenerator-webappを利用してプロジェクトを生成する場合、もろもろ苦労したので対処法を記載します。 node, npmのバージョンを確認する yeoman, grunt, bowerで静的サイト構築（第二回）でnvmでnodeのバージョン管理を紹介しています。 下記の環境で…

今回の目的は、gruntでsass(css), jsのドキュメントを自動で生成する環境を用意することです。 grunt-styleguide, grunt-contrib-yuidocを利用します。 https://github.com/indieisaconcept/grunt-styleguide https://github.com/gruntjs/grunt-contrib-yuid…

assembleを利用して静的サイトを構築するでhandlebarsを利用しましたが、今回はhandlebarsの基本的な文法について簡単に紹介したいと思います。 http://handlebarsjs.com/ https://github.com/assemble/handlebars-helpers 変数 {{ }}で定義した変数を囲むだ…

yeomanのgenerator-mobile, generator-webappなどを利用すれば、静的なサイトを実装できる環境は簡単に用意できましたが、assembleを利用することでHTMLの管理・実装に関してさらにすばらしい環境にすることができます。 https://github.com/assemble/assemb…

yeomanのgenerator-mobile, generator-webappなどを利用すれば、静的なサイトを実装できる環境は簡単に用意できました。 但しその環境は、静的なファイル（html, css, jsなど）にアクセスして表示できるだけの環境でしかありません。 jsでUIを実装したくても…

Gruntfile.jsに様々なタスクを設定すればするほど、ファイルが肥大化してしまいます。 そんな時はGruntfile.jsに設定したタスクをタスク毎にファイル分割しましょう。 やり方は簡単です。 下記githubのコミット履歴を参考にしてください。 https://github.co…

yeoman, grunt, bowerで静的サイト構築（第四回）の続き 今回はデプロイの処理の流れを追ってみたいと思います。処理を追うことで、gruntのタスクに関する理解が深まると思います。 「-v」オプションを付けて、より詳細な動作ログを出力して確認します。 $ g…

yeoman, grunt, bowerで静的サイト構築（第三回）の続き 今回の内容は下記です。 bower, .bowerrc, bower.json grunt-bower-install bower 以前にも簡単に触れてはいますが、yeomanのインストール時にbowerもインストールされ、yo mobileの実行でbower insta…

yeoman, grunt, bowerで静的サイト構築（第二回）の続き 前回は yo mobile でプロジェクトの雛形を構築するところまでやりました。 compass関連のタスクを実行するため、ruby及びrbenv-gemsetの環境を構築する必要があり、動作確認までできておりませんでし…

yeoman, grunt, bowerで静的サイト構築（第一回）の続き 第二回の内容は下記です。 nvmを利用したnode.jsのインストール yeomanのインストール generator-mobileを利用してモバイル静的サイト構築用のプロジェクトの雛形作成 nvmを利用したnode.jsのインスト…

yeoman, grunt, bowerで静的サイト構築するための情報を記載していきたいと思います。 第一回はyeoman, grunt, bowerについての簡単な紹介です。 yeoman（ヨーマン） http://yeoman.io/ node.js上で動作する様々なプロジェクトの雛形を構築できるアプリケー…