Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発 - albatrosary's blog
Single-page Application(SPA)によりフロント開発にかかる手間が膨大になっています。SPAの開発をするときに通信部分（JSONやJSONPなど）をどうすればいいのかが問題になります。解答としてはスタブAPIサーバを作成し対応します。 画面開発するためにアプリケーションサーバを構築するのは時間の無駄ですのでgruntタスクにモックサーバを構築し簡単実装を行いましょう。 「本物の」APIサーバを使う場合は向きを変えることで簡単に結合テストできますし、CIを使うときはもちろんモックサーバでのテストになりますのでモックAPIサーバは活用するのが良いと考えます。 モックAPIサーバ gruntでモック用APIサーバを立ち上げるためのプラグインとして有名なものとして２つ存在します。 grunt-easymock grunt-stubby easymockはnode-easymo
「チーム開発に役立つstubcell」ってタイトルでCodeGrid 2周年パーティでLTしてきた。 - from scratch
CodeGrid 2周年パーティでLTしてきました。 2周年おめでとうございます！！ TL;DR stubcellというjsonを返すことに特化したstubサーバーを作りました 内部的にjson5を使うことで定義ファイルにコメントを書くことができ、開発者間のコミュニケーションの補助になる grunt, gulpからstubサーバーを使うことができるため、フロントエンドタスクランナーと相性が良い 発表資料 stubcell 概要 いわゆるJSONを返すことに特化したstubサーバーです。 チームで開発する時に、APIサーバー、クライアントサイド、websocketサーバーといった感じに複数の役割を複数の人数で請け負って同時並行開発することが多く、APIのエンドポイントがなくてもクライアントサイドやwebsocketでも開発できるようにするためにstubcellを作りました*1。 また複数人で
最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 (はてなBlog)
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
素人のための Grunt プラグイン利用のすすめ - Qiita
はじめに Qiita 初投稿ながら Advent Calendar 書かせて頂きます。 書きたかった他の方々すみません。 この記事は、自分も含めて、 「Grunt とか gulp.js とか、名前は聞くけどそういうのよく分からないよ」 「使ってみたけど、なんか上手く行かないよ」 という人たち向けの記事です。 巷では「gulp.js 使えよ」という風潮をひしひしと感じますが、 素人には Grunt の方が取っ付き易いなあ、と思うところがあったので Grunt の記事にします。 お世話になってきた Grunt への追悼もちょっぴり込めて… Grunt を使ってみよう 既に秀逸な記事が沢山あるのでさらっと。 ここでは grunt-init を利用してひな形を作りましょう。
pecoで各プロジェクトのルートディレクトリを検索して、簡単に動作させるやつ - Qiita
管理の面倒臭さと散らばってゆくファイルたち Git Vagrant Docker Gulp Grunt Chef Guard . . . DevOpsやタスクランナーなどがフロントエンドやバックエンドエンジニアの中で流行っている昨今、いろんな場所にいろんなプロジェクトディレクトリが散らばってて管理に困ってませんか？ ぼくもそのひとりです。 いちいちそれぞれのプロジェクトのパスを覚えるのも面倒。。。 なので、この辺を参考にさせていただき、特定のファイルを検索して、各アプリの動作に簡単にアクセスするpeco。 http://d.hatena.ne.jp/syohex/20140729/1406648636 http://qiita.com/yungsang/items/e10ca283a1ceeaa845db peco, peco, peco... セットアップ @yungsangさんのpec
grunt+istanbul+mochaでNode.jsのテスト＆カバレッジ計測を行う - Qiita
単体テストの件数や可否ももちろんですが、コードのカバー率も可視化されることで、品質向上の1つの指標にもなります。 Node.jsで開発しているプロジェクトについて、こういったデータをgruntタスクで簡単に生成できるようにしましょう。 仕組みとして使うものは以下のとおりです。 grunt: JSタスクランナー mocha: JSテストフレームワーク chai: BDD/TDDアサーションライブラリ sinon: Spy,Stub,Mockライブラリ istanbul: コードカバレッジ計測ツール gruntは既に導入済みで、活用している前提とします。 JSのテストはJasmineが有名ですが、自由度の高いmocha+chai+sinonが個人的にはお気に入りなのでこちらを使います。 コードカバレッジ計測はいくつかの選択肢がありますが、メソッドや行、分岐等を計測できるistanbulを使いま
Yeoman入門(第一部、yoを使う) - from scratch
※ 追記： id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!! これからYeomanに関して説明していきます。 Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話、yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。 Yeomanとは Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。 Yeomanを使う
Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる | DevelopersIO
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
Yeomanでフロントエンドとバックエンドサーバを一緒に開発する
先月、HTML5など勉強会に参加した時、雑談タイムで 「 yeoman を使ってバックエンドの開発とかできないですか？ 」 という内容に対して、フォローとして ｢ gruntでリバースプロキシ使えますよ ｣ っていうお話をした。 そのまま記事に書かずじまいで申し訳ないなーと思っていたら、@bathtimefish さんがブログをアップされていた。 その記事、 YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 でリバースプロキシを使った手法が挙がっていたのですが、gruntのモジュールを使うともう少し楽ができそう。 私は、easymock を知らなかったですし、やはりyeoman 使ってる人が周りにあまりおらず、前回の勉強会は非常に勉強になったので、ここは一つ御礼の意味を込めてブログを書こうと思います。 ということで、yeoman(grunt) を使ったバックエンド
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
Maintainable Gruntfile.js - from scratch
さてさて、前回の続きです。 オレはgruntのエコシステムに乗って楽をしたい、でもGruntfile.jsが長くなりすぎて辛い、grunt taskが時間がかかりすぎて辛い、という話は話で分かります。また、それに対する色んな解決策もあります。 最近出た、HTML5Rocksで紹介されてたやり方もあるし、いくつか先人の知恵もあるので、解決していきましょう。 Gruntfile.jsが長くなりすぎて辛い時 https://github.com/firstandthird/load-grunt-configを使いましょう。 いろんなtipsを見てきましたが、このライブラリが一番分かりやすく、かつGruntfile.jsをメンテナブルに保つことができます。 load-grunt-configには3つの機能があります。 grunt pluginの自動ロード機能 grunt configのファイル分割
Grunt Xmas!!! | GREE Engineering
いまやさんからバトンタッチ！ みなさんこんにちは！ すっかりフロントエンド開発では定着したGruntの話はもう飽きてると思いますが、今日はフロントエンドではなく、バックエンドエンジニア向けにどう活用できるかをご紹介したいと思います。 ※このエントリは GREE Advent Calendar 2013 9日目の記事です。 自己紹介 石川将行と申します。IDは ishikawam か M_Ishikawa です。ソーシャルゲームの開発エンジニアです。 ぼくのチームではGruntはフロントエンド(HTML, JS, CSS等マークアップ)制作のエンジニアだけでなくバックエンド(PHP等サーバサイド)開発のエンジニアも使ってます。 双方ともに同じリポジトリで同じGruntの設定(＝Gruntfile.js)を共有しています。 Gruntはプロジェクトをビルドするためのスクリプト(タスク)を自由に
grunt bower yeoman入門記事 - lxyuma BLOG
※これは、社内の勉強会の資料の下書きです。 ここ数年で、js環境が整理されてきた。 js開発するなら、これらの知識は必須。無いとめっちゃ不便。 という事で、今日は、gruntとbowerとyeomanの話。 各ツール概説 Yeoman applicationのひな形を作る アプリ構築に必要な様々な作業を任せられる Grunt build / preview / testに使う Bower 依存性の管理を行う 手動でDLやscript管理する必要無 rails開発者のために ぶっちゃけ、どれも、railsの環境にそっくり。rails知ってる人は、要するに、以下の事。 grunt => rails server実行時に勝手にやってくれる作業を切り離してカスタマイズできるようにしたもの(coffeeのコンパイルとか) bower => ruby gem管理をjsのclient側で実現した物。 y
東京Node学園祭2013の宿題：Gruntプラグインのdefault configを取得する方法 - ぼちぼち日記
1. きっかけ 「ブログを書くまでが勉強会〜」ということで、東京Node学園祭2013に参加してきました。細かいセッションレポートは他の人に任せますが、id:yosuke_furukawa さんの「東京Node学園祭 2013にスタッフ兼スピーカーとして参加しました。」で述べられているよう、最後飛び込みLTが続いて学園祭がとても盛り上がったのは楽しかったです。 残念ながら予定をいれてしまい途中で無限LTから退出することになったのですが、 [twitter:@muddydixon]さんのGruntに関するLTで 「Gruntのプラグインがいろいろあるけど config書くのにいちいちドキュメントを参照するのが大変だ。 default の config を出力できるようにするとか、なんとかならない？」 な感じの話があり、私自身も以前同じ事を思ってたので、そうだよなぁ〜と思って会場を後にしました
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
jsCafe v13 Grunt
jsCafe v13で発表した Grunt のビギナーズ向けのスライドです。 間違い・不明点があれば連絡してもらえれば直します。Read less
Grunt: The JavaScript Task Runner
Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GRUNT のあんなこといいなできたらいいな
