Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build proc…
さてさて、前回の続きです。 オレは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のファイル分割
[2013/12/19 追記] 本記事で紹介している方法をモジュール化し、Node.jsで利用可能にしたuglify-save-licenseを公開しました。本記事のコードに改善を加えているので、利用する場合は記事中の方法ではなくそちらのモジュールを使用してください。 はじめに クライアントサイドJavaScriptにおいて、（スタイルシートの読み込み直後での読み込みが推奨されているModernizrなどのライブラリ以外は）圧縮・結合してbody要素の末尾で読み込む、という手法は最早定番と言えますが、今回は圧縮ツールUglifyJSを用いる際に、ライセンスコメントをできる限り残しつつ圧縮する方法を紹介します。 ……という予定だったのですが、アドベントカレンダーの担当日の数日前に、ライセンスコメントを抽出する非常に強力な方法としてgrunt-license-saverが登場し、ここで紹介する
% grunt pagespeed Running "pagespeed:desktop" (pagespeed) task >> >> ---------------------------------------------------------------- >> >> URL: http://bihyaku.appspot.com/bijin-zoroe/ >> Score: 81 >> >> ---------------------------------------------------------------- >> >> Number Resources | 21 >> Number Hosts | 4 >> Total Request Bytes | 1526 >> Number Static Resources | 18 >> Html Response Byte
本投稿について Gruntプラグインを紹介していくGrunt Plugins Advent Calendar 2013の12/1の投稿です。 さっき作ったばかりなので、まだすっきりさっぱりしたカレンダーになってますので、どうぞよろしくお願いします。 http://qiita.com/advent-calendar/2013/grunt-plugins grunt-githooksとは GitフックでGruntタスクを実行する仕込みをしてくれるGruntプラグインです。 https://npmjs.org/package/grunt-githooks https://github.com/rhumaric/grunt-githooks Gitフックとは Gitではcommitやpush, rebase, checkoutなどいくつかの操作ができますが、それらの特定の操作を行ったときに、スクリ
Gruntをよく使うようになったけど、プロジェクトの中心にどっかと存在していると不自由なことが多い気がするなーと感じている。Gruntべったり、つまりプロジェクトをGruntに強く依存させるとポータブルである保証のあるタスクだけを使う(書く)ことを強いられる。Gruntはその雑な自由度が良い所で、そこに何かしらの制限が加わってしまうのはその良さを低減させてしまうと思う。 Node.js自体にクロスプラットフォームだけどさほど書かれるスクリプトのポータビリティを意識した作りになってないような印象を持っている。そのためその上で動くGruntでポータビリティとかなんの冗談だとか思ってしまう。 Gruntの開発チームが公式にメンテナンスしているgrunt-contrib-*は確かに安定して優秀で、大体のことはポータブルなそれらで事足りたりする。だけど簡単なタスクを書いて使いたい時はもちろんあるし、
Bower入門(応用編) さて、応用編を書いていきます。 基礎編ではBowerのインストールとライブラリ管理する上での基本的なコマンドを紹介しました。 応用編ではBowerのライブラリを管理する上で利用するべきツールやライブラリを公開する上で心がけるべきことについて書いていきます。 少し長いのでサマリ Bowerを管理する上で利用すると良いツール：grunt-bower-taskがオススメです ライブラリを公開する上で心がけること、その1：mainとignoreをちゃんと書きましょう ライブラリを公開する上で心がけること、その2：ちゃんとgit tagを使ってバージョン管理しましょう Bowerからインストールしたライブラリを利用する場合 前回の基礎編で少し書きましたが、おさらいすると、Bowerはあくまでパッケージマネージャなので、インストールしてもフォルダ構造までは変えてくれません。
Karmaとは 昨年、Googleがnode.jsベースのJavaScriptテストランナー、「Testacular」をオープンソース化しました。 このツールは元々AngularJSのためのテストフレームワークとして作られたそうで、 クライアントサイドのJavascriptコードのテストを簡単に実行することができます。 このツール自体はテストランナーで、JasmineやMochaなどのテストフレームワークを使用してテストを行います。 先日このプロジェクトの名前が変更され、「Karma」という名前になりました。 今回はKarmaのインストールからテスト実行(+ Gruntでの実行)までをおこなってみます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.4 npm
JavaScript FrameworkならBackboneでしょ。 と勝手に思い込んでそればっか使ってきたボクですが、年初にheavenshellとかどっぺちゃんとで飲んだ時にviewが重くなるよね―とか話してたしかにそれ悩みだよなと思った。 そんときAngularJSってどうなんだろうねーって話にちょっとなって、そんときからangularいつかやってみようと思いつつ仕事で忙殺されてたんだけど、今日何気にSNSで「AngularJSに仮入信してみる」ってつぶやいたらGoogleの人にいいね！してもらってちょっと上がった。 さらに都合のいいことに外出で2時間程度電車に乗ってヒマな時間ができたので、車中でAngularの洗礼を受けてみようとPCを開いた次第。ちなみに途中で酔いました。以前新幹線で思い知ったのだけど懲りてなかった。電車でコーディングは控えましょう。特に自分。 さて、Angula
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
