画像の最適化をCLIだけで行うgrunt-imageを作った
画像の最適化をCLIだけで行うgrunt-imageを作った Webにおける画像については以前記事にしたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私の業務は弊社サービスのパフォーマンス改善を業務。何がボトルネックになっているかは各プロジェクトでまちまちだが、共通しているのが 「とにかく画像が多い」 というところ。どのサービスもペイロードサイズの80%程を画像が占めている。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、これではCSSやJavaScriptのファイルサイズを減らしても本末転倒である（もちろんCSSもJavaScriptも結合と圧縮は非常に重要だけど！）。 各種最適化ツール ではどうやって画像を最適化するのか、という話になるが、GUIだと以下の3つが有名で優秀。 ImageAlpha: フリーソフト。24b
gruntやgulpでSSIを利用する
Webサイトの設計・実装時に、Gruntのgrunt-contrib-connectを利用してWebサーバーを立ち上げているのですが、ApacheのようにSSIが使えたらなと思うことが時々ありました。 今日「node.js ssi」でGoogle検索をしてみると、偶然1位にssi - npmを発見しました。さらに調べていくと、connect-ssiというMiddlewareを見つけました。テストしてみたところ、<!--#include file="foo/bar.txt" -->の記述で、bar.txtの内容がインクルードされました。これは使えそうです。 ただ、次の3点の問題があり修正してプルリクエストを送信しました（慣れていない上に英語が苦手なので申し訳ない感じですが...）。これらは取り込まれ、バージョン0.1.3として公開されました。 /foo/にアクセスした際に、/foo/inde
タスクの設定 | Grunt 日本語リファレンス | js STUDIO
このガイドでは、プロジェクトでGruntファイルを使ったタスクを構成するための方法について説明します。 もし、Gruntfileのことが分からなければ、はじめにと Gruntfileサンプルを確認してみてください。 Gruntの構成 タスクの構成とターゲット オプション ファイル テンプレート 外部データのインポート Gruntの構成 タスクの構成はGruntfile内のgrunt.initConfigメソッドを通して指定されます。 この構成は、大抵の場合タスク名のプロパティ下にあり、任意のデータを含むことが可能です。 プロパティが必要とするタスクと衝突しない限り、それらは無視されます。 また、これはJavaScriptでもあるため、JSONに縛られることはありません。 ここにJavaScriptを書くことも可能です。 必要であれば、プログラム処理によって構成情報を生成しても構いません。
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
Libsass 3.2とタスクランナーと私
今日からLibsassを使うことにしました。Sassは元来Rubyで書かれているのだけれど、それをC言語で書き直したのがLibsassで、コンパイルの速さが特徴。 きっかけは、2015年4月27日にLibsass 3.2がリリースされたこと。出力スタイルに個人的に好きな（というよりごく一般的な）"expanded"が追加されたほか、Sassの機能的にもSass Compatibilityを見ると一目瞭然、Ruby Sass 3.4との互換性が大幅に向上しています。gitでcloneしてコンパイルしてsasscコマンドを走らせたところ、Libsass 3.2なら今まで書いたSCSSファイルをコンパイルしてもエラー無し。ついに移行の時が来たか、と考えていました。 そして今朝Twitterを見ると、LibsassをNodeで使えるようにしたnode-sass 3.0.0が登場。正直ちょっと待ちく
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
Gruntjsでutf-8のhtmlをshift-jisにして出力する方法 - Qiita
shift-jisのhtmlを出力したいとき、 出力元htmlはutf8にして出力先htmlをshift-jisにすれば、 includereplaceなどでhtml結合しても文字化けなどに悩まされずに済みます。 package.json { "name": "grunt_encoding", "version": "0.0.0", "description": "file encofing sample", "author": "svartalfheim", "license": "MIT", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-copy": "^0.5.0", "iconv-lite": "^0.4.3" } } var iconvLite = require('iconv-lite'); module.expo
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
GruntベースのHTML5サイト制作テンプレート 2014年11月版 - Qiita
自分がHTML5サイトを制作する時の環境をテンプレート化し公開してみます。 レガシーブラウザ（IE7、IE8など）もカバーすることを考えているので今のフロントエンドの流行からすると古い技術を使っているかと思います。 JavaScriptのフレームワークにBackbone.jsを使っていましたがプロトタイプベースなのが書きにくくてやめて、モジュールパターン+MVCパターンで直に書いています。 データ一式 Github ダウンロード 準備 コマンドライン（Terminalなど）でダウンロードした解凍ファイルのROOTディレクトリに移動 npm install 説明 JSプラグイン Lo-Dash(underscore build) underscoreよりLo-Dashのがパフォーマンスがいいのですが Backbone.jsがunderscoreを採用しているのでLo-Dashのundersc
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-pluginの作り方と解剖 - Qiita
先日、はじめてgrunt-pluginを公開してみました。 そこでいくつか、「!?」となる箇所があったので、grunt-pluginをつくるときの注意まとめしてみます。 ある程度gruntを使っていて、Gruntfileもしこしこ書いたことある方向けです。 grunt-pluginとは? そもそもgrunt-pluginとは何なんでしょうか。 最低限必要なのは、 gruntにtaskを追加するスクリプト 、ってとこだと思います。 例えば、こんなものでも、grunt-pluginと言えば言えそう。 var grunt = require('grunt'); grunt.registerTask('sample', 'sample task', function () { console.log('this is sample task!'); }); このgrunt.registerTask
【Grunt】styledoccoでCSSスタイルガイドを自動作成をしてみる。 | DevelopersIO
アジェンダ styledoccoとは? 導入準備 Gruntの設定 CSSのコメント記述方法 動作確認 styledoccoとは？ Node.jsを使用して、CSSのスタイルガイドを作成してくれます。 導入準備 今回はNode.jsのパッケージを使用します。当ブログでも環境構築のご紹介していますので、以下を参考にNode.jsをインストールしてください。 【もうすぐバレンタインデー】デザイナーがCoffeeScprit、TypeScriptの開発環境（Win/Mac）をインストールしてみる 今回の動作環境 OS:windows7 Gruntをインストールする。 今回styledoccoを自動化するに際に、Gruntにお世話になるので以下コマンドからGruntをインスールします。 npm install -g grunt npm install -g grunt-cli gruntで自動化し
ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは本末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者
Building Apps With the Yeoman Workflow | Envato Tuts+
What Is Yeoman? Trick question. It's not a thing. It's this guy: Basically, he wears a top hat, lives in your computer, and waits for you to tell him what kind of application you wish to create. As an example, scaffolding a web application would look something like this: The first thing that comes to mind is OMG so dreamy. Second, thanks, bro. All we did was tell him what we wanted and he replied
Jekyll で --watch の代わりに Grunt を使ってみるテスト
このブログでは Jekyll を使ってることは何度か書いたのだけど、いままで記事を書くときには jekyll --auto を実行した状態で書いていた。このようにしておくと、ファイルを書き換えたら自動的にサイトをビルドしてくれるようになる。ただ、このコマンドを実行してると CPU がグオーンと音を上げ始め、クアッドコアで CPU 使用率 25% に達するという地球に優しくない状態であった。 原因を調べてみると directory_watcher モジュールが犯人だった。このモジュールは、監視対象のディレクトリー配下の全ファイルに対して、毎秒、File::Stat() を実行する、という富豪的実装になっている。もちろん、ファイルの数が少ないときには問題なく動くんだけども、ファイルの数が増えると CPU を浪費してしまう。 たとえば、このサイトの場合、600 個以上の記事があって、Jekyll
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Grunt][Jekyll]Jekyll × Gruntでブログを作ってみた：まずはJekyllだけ動かしてみる
Phuse
grunt-contrib-watchでlivereload
http://lab.spec5zigen.com/archives/mygruntfile-js/
Jekyll, Bower & Grunt