画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
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
Grunt Pluginsのカレンダー | Advent Calendar 2013 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる grunt-connect-proxy を紹介するよ - Qiita
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる grunt-connect-proxy を紹介するよPHPJavaScriptgrunt grunt-connect-proxy grunt でプロキシサーバをたてることが出来るプラグインです。 npm i -D grunt-connect-proxy 特徴 もう単純にリバースプロキシするだけです。はい。 でもそれだけだと利点が分かりませんです。はい。 なので以下利点を2つ。 クロスドメイン問題の回避 開発サーバで 複数ポート / 複数FQDN を 同一ドメイン下で リクエストハンドリング出来るようになります。 例えば 本番環境ではAPI実装とアプリ実装が同一なのに、easymock などの APIモックサーバと開発サーバが別立ての場合、クロスドメイン制約があったりして色々と面倒です。 それらを grunt-connect
grunt-este-watchとgrunt-contrib-connectで軽快ファイル監視とLiveReload - Qiita
$ npm install grunt grunt-contrib-jade grunt-contrib-stylus \ > grunt-contrib-connect grunt-este-watch module.exports = (grunt) -> grunt.initConfig connect: server: options: # LiveReloadに必要なスクリプトを</body>直前に挿入してくれる # 多分grunt-contrib-connect ver.0.4.0から # HTML5などでbodyタグを書いていないと挿入してくれないみたい…… livereload: true esteWatch: options: # 監視対象のディレクトリ # ['./**']などとするとサブディレクトリを含むようになる dirs: ['.'] livereload: en
YeomanでAngularJSしてCoffeeScriptにしてみた。っていうかGrunt最強って話 - bathtimefish's blog
JavaScript FrameworkならBackboneでしょ。 と勝手に思い込んでそればっか使ってきたボクですが、年初にheavenshellとかどっぺちゃんとで飲んだ時にviewが重くなるよね―とか話してたしかにそれ悩みだよなと思った。 そんときAngularJSってどうなんだろうねーって話にちょっとなって、そんときからangularいつかやってみようと思いつつ仕事で忙殺されてたんだけど、今日何気にSNSで「AngularJSに仮入信してみる」ってつぶやいたらGoogleの人にいいね！してもらってちょっと上がった。 さらに都合のいいことに外出で2時間程度電車に乗ってヒマな時間ができたので、車中でAngularの洗礼を受けてみようとPCを開いた次第。ちなみに途中で酔いました。以前新幹線で思い知ったのだけど懲りてなかった。電車でコーディングは控えましょう。特に自分。 さて、Angula
昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー
昨日の続き。 こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。 Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするときに使うもの、つまり rake なんかと同じようなものと以前にチラ見した程度で知った気になっていたけども、ちょっと違っていた。Grunt は確かにタスクランナーではあるのだが、Node.js で実装している利点を十分に活かして、任意のファイルが更新されたのをトリガに一連のタスクを実行させたり、Grunt で Webサーバーを立ち上げて他のタスクと連携させたりといったことができるようになっている。プラグインの仕組みがあって、エコシステム的に結構活発に
2012年末に観ておきたいJavaScript20選: githubでwatch数の多い200件から - memo.yomukaku.net
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
grunt-este-watch めっちゃ便利やんけ - 音の鳴るブログ
grunt-este-watch で幸せになれるらしいと聞いて試した。 grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった - てっく煮ブログ そしたら凄く良かったという話です。 CPUの消費量は気にしていなかったのだけど、変更のあったファイルに対して柔軟にタスクが組めるのが非常に便利。今まで変更があるたびに関係ない部分もテストしていたり、それをなくすために複雑な方法を使ったりしていたけどだいたい解決した。しかも速くなった。 今までやりたかったこと 更新したファイルのみ jshint したい 更新したファイルに関連するテストだけ行いたい 更新したテストファイルのテストだけ行いたい 失敗したテストは次回もテストしたい こういうことをしようとしたとき、grunt-contrib-watch ではやりにくかった。というのもサブプロセスでタ
grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった
最近、Grunt と grunt-contrib-watch を使っているのだけど、grunt-contrib-watch が CPU を消費しがちである。 watch 対象のファイルが少ないうちは grunt-contrib-watch は問題なく動くんだけども、ファイル数が増えてくると CPU の消費量が増えてくる。自分の環境では、1,000 個ぐらいのファイルを監視していると、常時 10% 程度 CPU を消費している。 この問題は既知であり、FAQ には次のように書いている。 たくさんのファイルを監視している場合、デフォルトの interval の値が小さすぎるかもしれない。options: { interval: 5007 } のようにして増やしてみてほしい。詳しくは issues #35 と #145 を参照のこと (※日本語訳は私によるもの) Another reason i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/watilde/items/278ce0593339072d5627
Grunt入門 - Qiita
GitHub - drewzboto/grunt-connect-proxy: Grunt Connect support for proxying API calls during development