grunt-simple-ejs テンプレートを使って HTML を生成する | DriftwoodJP
head や aside、nav などの共通要素をはめ込んで、数十ページのスタティックなHTMLを作成したく、テンプレートエンジンを調べたところ、grunt-simple-ejs を見つけたので使ってみました。 Node.js や Grunt まわりだけでも、いろいろな技術がたくさんあって、アウトラインもまだつかめていないです。 こちらのエントリーが勉強になりました。 フロントエンドなプリプロセッサ・テンプレートエンジンまとめ | Penタイトルの件については、Qiita で下記の解説付きエントリを見つけ、目的を果たせそうなので、動かしてみました。 grunt-simple-ejs作ったので使ってほしい – Qiita [キータ]
HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ
こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか？ おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト（コーディング面倒…）インラインCSS（コーディング面倒…）メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の
Grunt で、utf-8 で開発を行いながら shift_jis のファイルを自動生成する方法 - Qiita
問題 Grunt では shift_jis のファイルをうまく扱うことができません。 特に、grunt-contrib-connect などで立てたローカルサーバで shift_jis の HTML ファイルを表示すると文字化けしてしまい、使い物になりません。 解決策 普段通り utf-8 で開発を行いながら、shift_jis のファイル群も生成する Grunt タスクを作成しました。 以下のようなディレクトリ構造を想定しています。 ├─Gruntfile.js ├─package.json ├─sjis 【shift_jis のファイル群を自動生成するディレクトリ】 │ └─ │ └─utf8 【utf-8 で普段通り作業をするディレクトリ】 ├─css ├─img ├─js └─index.html module.exports = function (grunt) { grunt.
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でsrcset用の各デバイス画像を作成するジェネレーター
元記事を見る→Build better sites by telling stories | Webdesigner Depot 「ペルソナ」や「シナリオ」という言葉は聞いたことがありますよね？ これらがいかにデザインプロセスに役に立つかというお話をしたいと思います。 ペルソナはあなたのサイトのターゲットの中の典型的な存在を指し、ユーザビリティやUXデザインを考えるときに基礎的なツールになるものです。 架空のユーザー代表像といえますが、データに基づく、できる限り実在するユーザーの性質をとらえたものでなければなりません。 シナリオは、ユーザーがあなたのサイトやアプリをさわっている間に「何を経験し／どこに行き／どうアクションするか」を仮定した「ストーリー」です。サイトの中でユーザーが従うべきプロセス、リテラシーの度合い、サイトに関わる理由、動機、達成すべきゴールを説明するものであり、またどのよ
なんでも開ける grunt-open について紹介するよ - Qiita
grunt.initConfig({ open : { dev : { path: 'http://127.0.0.1:8888/src', app: 'Google Chrome' }, build : { path : 'http://google.com/', app: 'Firefox' }, file : { path : '/etc/hosts' } } }) grunt.loadNpmTasks('grunt-open'); (via.) https://github.com/jsoverson/grunt-open#gruntfile-configuration サンプルではdevやbuild、file等設定していますが、シンプルな機能なのでオプションも少ないです。 path項目は必須で、開きたいURLもしくはファイルパスを設定します。 例えば http://127.0.0
Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる | DevelopersIO
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
Grunt YSlow, a Grunt Task to Measure and Grade Web Page Performance
A Grunt Task to Measure and Grade Web Page Performance. By Andy Shora ← back to andyshora.com | Tweet this article Need a way to measure your page load time using Grunt? Or how about the number of requests your page makes, or the total page weight? I can't take the credit for the underlying library, but I've packaged up the YSlow library into a Grunt task so you can test the performance of your we
TinyPNG API を使って PNG 画像を最適化する grunt-tinypng 使ってみた
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツールとして TinyPNG は有名ですが、開発者向けの API も提供されています。 この TinyPNG API を使った画像の最適化を Grunt タスクとして実行できる 「grunt-tinypng」 をここのところ試していたんですが、いい感じだったので紹介。これまでは 「grunt-pngmin」 を使っていたのですが grunt-tinypng に移行して試しています。 grunt-tinypng ： marrone/GitHub TinyPNG ： Compress PNG images while preserving transparency ちなみに、TinyPNG API は処理する画像の数によって有料になりますので、その点は注意が必要です。現時点での価格設定は下記のようになっています。 Free プラン
Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開
一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行います。 オプション解説 以下のオプションが設定可能です。変更が必要なオプションのみ記載して下さい。記述がないオプションは、srcで指定されたCSSファイルのフォーマットでそのまま出力されます（そのため、ほぼ全てのプロパティに初期値を指定していません）。 なお、''は改行も空白も入れないことを意味しますので注意して下さい。 decl.before 型 String 初期値 なし CSSプロパティ名の
フロントエンド自動化ツールをまとめて理解する - ワザノバ | wazanova
http://www.youtube.com/watch?v=1OAfGm_cI6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 GoogleのAddy OsmaniによるFuture of Web Appのキーノートスピーチです。 49分間 [Video]で下記の話題を全てまとめてます。フロント関連の便利ツールが一通り網羅されてます。おかげで、Yeoman (Yo/Grunt/Bower) の概要もすっきり理解できました。スライド（236枚）で確認されたい方はこちら。 Codekit Hammer Prepros Koala Mixture compass.app scout-app Yeoman / Grunt grunt-image: JPG/PNG/Gifを最適化して軽量化 grunt-
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
Gruntプラグイン: selector4096
IE9以下で4096個以上のセレクターがあるとスタイルが反映されなくなるバグのチェックを行うGruntプラグイン、selector4096を作った。CSSプリプロセッサーでネストしつつ@extendするとぽんぽんセレクター増えていくので、最近はまめにチェックするようにしている。自己最多記録は3400くらいで、バグに引っかかったことはまだない。 npmで普通にインストールした後、Gruntfile.jsに以下のように書いて準備完了。 grunt.initConfig({ selector4096: { all: ['src/css/**/*.css'] } }); grunt.loadNpmTasks('grunt-selector4096'); 読み取り専用タスクなので、destとかは必要ない。 $ grunt selector4096:all 実行すると、src/css/以下のすべてのC
CSSOとgrunt-csso - MOL
読書の秋、ご勉学の方はいかがでしょうか。 I’m your @t32k. 今日はCSSO (CSS Optimizer) – A CSS minimizer unlike othersの紹介だ。前回のCSSCombは単純にプロパティのソートをしてくれるものだったが、今回のはminimizerだ。 普段はSassの:compressed出力で最後デプロイしてるんだけど、もっとマシなものはないかなーと特には探してはないけど、@cssradarパイセンがCSSOがいいって言ったとか言わないとかあったので調べてみた。 ちなみにSassの:compressedはこんな感じで出力しているらしい。 Compressed style takes up the minimum amount of space possible, having no whitespace except that necessa
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.)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブログ | ウェビングスタジオ
GitHub - elliottwilliams/grunt-colorguard: Find and catch color collisions at build time.
GitHub - buildingblocks/grunt-combine-media-queries: [DEPRECATED] A new version is managed here: https://github.com/frontendfriends/grunt-combine-mq![GitHub - buildingblocks/grunt-combine-media-queries: [DEPRECATED] A new version is managed here: https://github.com/frontendfriends/grunt-combine-mq](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e09101ebe9dfb2d0ed9c1f0578feabce9452d89/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F8c211702c9e1bcce5f9ed68217e0174fed8a7f736578106fca6e1e783d3e00ca%2Fbuildingblocks%2Fgrunt-combine-media-queries)
GitHub - vladikoff/grunt-devtools: 🛠 Grunt Task Runner Extension for Chrome Developer Tools
https://qiita.com/hail2u/items/7bf2b830f2536c71666d