gruntで快適JS/CSSビルド生活
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux) cowboy/grunt - GitHubこのgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。 似たモノで、MakeとかRakeとかCakeとかそういう
Gruntをようやく使ってみた - 愛と勇気と缶ビール
Gruntってアレですね、JSでホゲホゲっと設定ファイルを書いてJSとかCSSのファイルをminify/unifyとかするヤツです。 最近よく聞くので、機会があったら使ってみようと思っていたのですが、最近とあるウェッブページをPlay!Frameworkで作ってみたりしていたので、それのJS/CSSのビルドに使ってみました。 もろもろやりたいことを実現したらこんな感じに。本当はもうちょっと綺麗に書けるのではないかと思います。 https://gist.github.com/3738650 僕のやりたかったことは、 JS/CSSのunify JS/CSSのminify JS/CSSのgzip (for Play!) timestampをつけたファイル名の生成 作成されたfileどものclean conf, templateの文字列置換。@@timestampをtimestampに置換するなど
Ikemasa Blog - YUI Compressor GUI を作ってみました
いつも便利に使わせてもらっている YUI Compressor ですが、GUIもほしいなぁと思い、フロントエンドツールを作ってみました。 主な機能 1. ドラッグ&ドロップで圧縮元ファイルを指定 2. YUI Compressor 2.4.2の全オプションを指定可能 3. 圧縮状況の表示 4. 圧縮設定に名前をつけて保存 ダウンロード：YUI Compressor GUI 1.0.0 YUI Compressor GUI 画面 ファイルをドロップして、圧縮ボタンを押すだけです。簡単に使えます。 コンソールには、実行内容が表示されます。 動作環境 JRE 1.4以上 yuicompressor-2.4.2.jar インストール YUI Compressor GUI 1.0.0 をダウンロードして、適当な場所に展開します。 YUI Compressor 2.4.2 をダウンロ
ウェブサイトをgzip圧縮で高速化する
ウェブサイトをgzip圧縮を使って高速化するカスタマイズを紹介します。当サイトでもgzip圧縮を利用しています。 １．gzip圧縮によるウェブサイト高速化のイメージ gzip圧縮によるウェブサイト高速化のイメージをご覧ください。 （クリックすれば拡大します） クライアント（ブラウザ）から、あるウェブサイトの「index.html」にアクセスしたとき、リクエストを受信したサーバでは、HTTPリクエストの分析や、「index.html」の圧縮ファイル「index.html.gz」の有無などをチェックして、圧縮ファイルが返却可能であれば「index.html.gz」を返却します。 返却できない場合は通常の「index.html」をレスポンスで返却します。 圧縮ファイルを返却できれば、データの転送量を減らすことができるので、これによりウェブサイトの高速化につながります。 圧縮ファイルは受信したブラ
gzip圧縮してcssとかjsとか転送してみた
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / なんか高速化したいとかどうとかいう話があったのでローカルでちょろっと試した。 html5 boilerplate にある.htaccessのなかにある、Gzip Compressionの内容をコピってapacheの設定ファイルとかに書けば動いた。 html5 boilerplate - .htaccessこれやると、ファイルをgzip圧縮してからクライアントに転送してくれるらしい。 gzip圧縮なし gzip圧縮あり ファイルサイズが1/3ぐらいになってる。スゴシ。でもよく見るとgzip版の方がダウンロード完了までの時間が長い。これは、サーバー側では、リクエストがあったら圧縮して転送し、クライ
[Web] Google Page Speedでサイトを高速化(1)
つい先日Googleから公開されたは、彼らが社内で使っていたページを高速化するためのチェックツールです。のGoogle版と思えば良いのだと思います。 これらはあくまで「チェック」ツールなので、診断結果を自分で最適化しなければなりません。 YSlowでも「へー、知らなかった」と思うチェックポイントが幾つかありましたが、今回も考えていなかったようなポイント、知っていたものの徹底していなかった点などがあったので、そういった部分を中心に、自分の経験も踏まえてメモ。 まずは基本の「キ」である、ブラウザキャッシュについて。 ブラウザキャッシュの利用 – Leverage browser caching 基本的なことで忘れられがちですが、やはりブラウザキャッシュは最も効果的な高速化策のひとつです。 特にほとんど変更されない画像やCSS、Js、PDFなどの静的なコンテンツにはとても有効です。 また、HTM
javascriptとcssを全自動で連結&圧縮する | jamadam weblog
photo credit: amadeusrecord ウェブサイト作るときに、最近は膨大な数のjqueryのプラグインなんかをロードしなくちゃいけない。ロードするファイルが増えるとページのパフォーマ ンスにも影響するのでソースを1ファイルにまとめて、さらに圧縮するのが効果的なんだけど、これを手作業でするのは骨が折れる。特に開発段階では頻繁にソースへの修正が入るので、効率が悪い。そういう訳で自動化した。 こうなる 無数のjsやcssを個別に開発し、HTMLにはcat.phpのパラメータとして各ファイル名を+区切りで記述する。ファイルはdir/a.jsなどとディレクトリを切っても構わない。 <script type="text/javascript" src="./js/cat.php?jquery.1.4.2.js+a.js+b.js"></script> <link rel="style
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ikemasa Blog - YUI Compressor GUI 1.1.0 リリース
圧縮・高速化、ダウンロード, online tool
.cssファイル、.jsファイルをgzip圧縮してみる