jit-grunt で grunt をキビキビ動作の高速化
Take Grunt to the Next Level — Jonathan Suh この記事を見て知ったのだが、jit-grunt というプラグインが中々よい。Just In Time ということで、タスクのロードを loadNpmTasks でまとめて最初にやる代わりに、各タスクの実行時までロードを遅延させるというもの。 npm の jit-grunt ページを見ると相当数がダウンロードされて利用者がいるようだが、検索するとあまり紹介されてないようだったので書いてみる。 効能 17個のタスクをロードしていた手元の環境に導入したところ、単純なタスクを実行した限りでは次のような実行時間の短縮が見られた。計測は例によって time-grunt だ。 Before loading tasks で 625ms かかっていて、全体では 651ms を要した。 % grunt concat:lib
Gruntの罪と罰
2. 自己紹介 • かみやん (Twitter@kamiyam) http://nantokaworks.com • Engineer • 主にJavaScriptでお仕事をしている人 • ボルダリング/人狼/カメラ/自動車
GRUNT AND GULP TASKS FOR PERFORMANCE OPTIMIZATION
Delays in performance have the potential to impact user engagement, experience and revenue. Thankfully, Google’s ‘Make The Web Faster’ team recommend a set of best-practice rules for keeping your pages lean, fast and smooth. These include minifying resources like CSS and JavaScript, optimizing images, inlining and removing unused styles and so on. If you have complete control over your server, an
オレ的Gruntに対する最新の気持ち - from scratch
Gruntについて最新の気持ち ::ハブろぐ 上記のブログエントリを読んで非常に今自分が感じていることと共通点を感じました。 Gruntに対する最新の気持ちでは2つの問題提起がされてました。 1. Gruntfile.jsが長すぎる(700行とか) 2. そもそも全部gruntでやらなきゃいけないのか 1.に関しては色んな解決手段があります、ブログの筆者も解決されているようですし、この件に関しては次回のMaintainable Gruntfile.jsで触れます。 最初は2.に関しての、全部gruntでやらなきゃいけないんだっけ、という疑問に関してです。 僕も同じ思いをしてたので、同調してブログを書きます。 gruntについて 言わずと知れたタスクランナーですね、gruntを使うとjavascriptのminifyやmeta cssのコンパイルといったフロントエンドにありがちな作業を自動化
Build Wars: Gulp vs Grunt
A brief history of Grunt I realized that a task-based build tool with built-in, commonly used tasks was the approach that would work best for me Ben Alman March 2012 Single, global Grunt: $ npm install -g grunt Configuration over code grunt.initConfig({ lint: { src: 'src/<%= pkg.name %>.js' }, concat: { src: [ '<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>' ], dest: '<%= pkg.n
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
Gruntダイエットで健やかな開発を
Gruntタスクでダイエットする話ではないです。 Gruntfile.jsを10行にした話@watilde on Qiita このエントリを見てGruntfileのダイエットをしてみた。 激ヤセGruntfile コメントを消せば9行。スッキリ！ config.jsでタスクの管理 使うタスクはconnect: require("./connect")な感じで指定。requireで指定するのはgrunt.initConfigに記述していた内容が書いてあるファイル。 パスはconfig.jsから見た相対パスで指定。 package.json package.jsonは普通。 各タスクの中身 タスクファイルの中身はこんな感じ。 これらのファイルをconfig.jsで指定して使う。なんのタスクなのかファイルの先頭にコメントで入れておくと良い気がするので入れてる。 かなり管理しやすい。再利用も容易。
Grunt vs Gulp - Beyond the Numbers
Just when you think that you're in control, Just when you think that you've got a hold, Just when you get on a roll, Here it goes, here it goes, here it goes again. OK Go - Here It Goes Again And so the evolution of front-end development continues with Gulp, the new build system that has already garnered praise amongst many web developers. After spending some time reading the docs and playing arou
CSS書く人なら絶対入れとけのgrunt-contrib-csslintについて紹介するよ - Qiita
gruntjs/grunt-contrib-csslint 今回紹介するgrunt-contrib-csslintは栄えある安全安心のContribシリーズでありCSS Lintをしてくれるgrunt-pluginである。 JavaScripttを書く人であればJSLintやJSHintを使うのが当たり前かと思うが、HTMLコーダーにとってLintという行為馴染みが薄いかもしれない。ちなみに、LintとはWikipediaに以下のように書かれている。 転じて、C言語に限らず、各種言語で書かれた文書に対して文法チェックを行うプログラムも、lintと呼ばれるようになった。この意味でのlintの代表例としては、HTMLの文法チェックを行うAnother HTML-lintがある。 lint - Wikipedia おお、HTML Lintか！懐かしい！Validatorの名前のほうがコーダーにと
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
jsCafe v13 Grunt
jsCafe v13で発表した Grunt のビギナーズ向けのスライドです。 間違い・不明点があれば連絡してもらえれば直します。Read less
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
Gruntで始めるWeb制作の自動化
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Front-end Build Tools - JTF2014 Tokyo
安顺胖守工艺品有限公司
re-dzine.net situs togel online toto 2023 -