gulpからgruntのタスクを直接実行する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ
こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか？ おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト（コーディング面倒…）インラインCSS（コーディング面倒…）メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の
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
JTF2014「フロントエンドで普及が進むビルドツールたち — Grunt、gulp ほか」の聴講メモ #techfesta - べにやまぶろぐ
Swift のセッションに並んでこちらもフロント寄りのお話ということで、最近 Grunt あんまり活かせていないもやもやが解消するかなと思って こちらのセッション に参加してきました。そしたら時代は今や Gulp ですよという話に… 個人的に響いたこと Grunt から今や時代は Gulp に傾きつつある (Google も Gulp を担いだらしい、Yeoman はどうなった？？) デザイナーさんがタスクランナー活用して開発する時代 古典的アプローチでマルチデバイスのレスポンシブ対応とか無理 WF だと手戻り多すぎてクリエイターも CI する時代 フロント開発に node というか npm 必須になりつつあってそれはそれで悩ましい感じ 相変わらずフロントのトレンド（やツールが）すぐ変わってこれも辛い 聴講メモ 下北沢 オープンソース Cafe では毎週日曜日に小中学生向けにプログラミング
ASP.NET 5 と Visual Studio 2015 では Bower と Grunt が標準になるみたいなので勉強してみた - しばやん雑記
ASP.NET 5 と Visual Studio 2015 Preview では Bower と Grunt、そして npm へ標準で対応するようになりました。今後は ASP.NET 5 開発で必要となってくる知識になるので、簡単に調べてみました。 既に ASP.NET 公式サイトでは Visual Studio 2015 で Bower と Grunt を使う記事が公開されてます。 ASP.NET Core Blazor | Microsoft Learn これまでは NuGet だけ使っていれば解決してましたが、今後は .NET のコンポーネントだけが NuGet で提供され、クライアントサイドのコンポーネントは Bower を使うようになるのでしょう。 テンプレートにも Bower / Grunt / npm の設定ファイルが用意されていますが、まずは Bower と Grunt
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
僕がGrunt.jsで使っているPlugin一覧 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 2015-02-07: gulp編を作成 gruntからgulpへ移行したので、gulp版の一覧も作成しました。 僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可
Lineman.jsの立ち位置 - ワザノバ | wazanova
http://thechangelog.com/128/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約7時間前 Test Double社のJustin Searlsが、the changelogのpodcastで、Lineman.jsについてのインタビューに応えています。 Linemanは、JavaScriptのフロントエンドアプリ開発におけるコマンドラインツール。AngularJS / Ember.js / Backbone.js などがフレームワーク、Grunt / Gulp がビルドタスクの自動化ツールとすると、Linemanは慣習 & 設定（convention & configuration）ツールという位置づけのようです。各フレームワークにおいて、アセットの構築、サーバのmock、ファイル変更時
CompassでSpriteなんてもう古い！？grunt-spritesmithのすすめ - Thujikun blog
釣りっぽいタイトルになってますが、ようはCompassのSprite Generatorだと解決できないことをgrunt-spritesmithならやってくれるよって話です。 Compassの方については山ほど記事があるので、あまり知らないよって方はてきとーにググってください。 Compassの問題点 Sassでしか使えない 一つ目は当然ですが、CompassはSassのフレームワークなのでLessとかStylus派の人は使えないってことです。 私は最近はStylus派なので、なにか良いSpriteツールないかなーと探し始めたのが最初でした。 SassのCompileのたびにSprite化処理が実行される これは画像が多いサイトではかなり深刻な問題となります。画像とは関係ないStyleの変更時でも毎回Sprite化が実行されるため、確認までかなりの時間をロスします。 正方形に画像を並べると
画像の最適化をCLIだけで行うgrunt-imageを作った
画像の最適化をCLIだけで行うgrunt-imageを作った Webにおける画像については以前記事にしたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私の業務は弊社サービスのパフォーマンス改善を業務。何がボトルネックになっているかは各プロジェクトでまちまちだが、共通しているのが 「とにかく画像が多い」 というところ。どのサービスもペイロードサイズの80%程を画像が占めている。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、これではCSSやJavaScriptのファイルサイズを減らしても本末転倒である（もちろんCSSもJavaScriptも結合と圧縮は非常に重要だけど！）。 各種最適化ツール ではどうやって画像を最適化するのか、という話になるが、GUIだと以下の3つが有名で優秀。 ImageAlpha: フリーソフト。24b
GruntでSass/Compassのコンパイル+ブラウザ自動リロード
なんか最近みんなGrunt使い出してて便利便利言ってるので僕も使ってみた。 なにやりたいかCompassのコンパイルファイル更新時にブラウザの自動リロード他にもやりたいけど、今日使い始めたのでまずは上記だけ出来るようにする。 インストールとかkojikaさんのこの記事見ると一発で分かる。ありがとうございます!!! ブラウザに拡張機能インストールする LiveReload用の拡張機能をインストールする。とりあえずChrome用はこれ。 ファイル階層ファイル階層、以下のような感じを想定する。ブラケットで囲ってるのはフォルダ。 [project] ├[files] │ ├[_scss] │ │ ├_*.scss │ │ └style.scss │ ├[js] │ ├index.html │ └style.css ├[node_modules] ├config.rb ├Gruntfile.js └
あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方
連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツールを統合したワークフローを提供する「Yeoman」 Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。 訳すと、「今風のWebアプリのための土台／基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだ
grunt-useminでJS、CSSを結合 | 有限会社アテージ
昨今のWebアプリでは複数のJavaScriptライブラリを当たり前のように使うようになりましたが、パッケージマネージャとしてbowerを使っている方も多いと思います。 読み込むJavaScriptファイルが多くなるに連れて、読み込みの時間に悩まされることが多くなります。そこで個別に読み込むのではなく、1ファイルに結合してロード時間を短縮するということが行われます。 タスク自動化ツールのGruntには、パッケージマネージャbowerで落としたJSファイルを1つにまとめるためのタスクがいくつかあります。ただ、bowerパッケージのディレクトリ構成の規約が甘く、パッケージによっては依存関係をいちいち書き下す必要があるものがほとんどです。 今回紹介するgrunt-useminは依存関係はhtmlを参照すればよいということに目を付けたのがポイント。使い勝手のよいタスクになっています。JSだけでなく
grunt-csspretty
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript: The "csspretty" task _Run this task with the grunt csspretty command. Options '' meaning no spaces, no new-line. Please do not describe an option not to change a format. decl.before Type: String Default: none Strings before property name. decl.between Type: String Default: none Strings between
UglifyJSで、できるだけライセンスコメントを残して圧縮する - Qiita
[2013/12/19 追記] 本記事で紹介している方法をモジュール化し、Node.jsで利用可能にしたuglify-save-licenseを公開しました。本記事のコードに改善を加えているので、利用する場合は記事中の方法ではなくそちらのモジュールを使用してください。 はじめに クライアントサイドJavaScriptにおいて、（スタイルシートの読み込み直後での読み込みが推奨されているModernizrなどのライブラリ以外は）圧縮・結合してbody要素の末尾で読み込む、という手法は最早定番と言えますが、今回は圧縮ツールUglifyJSを用いる際に、ライセンスコメントをできる限り残しつつ圧縮する方法を紹介します。 ……という予定だったのですが、アドベントカレンダーの担当日の数日前に、ライセンスコメントを抽出する非常に強力な方法としてgrunt-license-saverが登場し、ここで紹介する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What causes this error in grunt-contrib-compass after update to Yosemite?
bower-buildでbowerで入れたファイルを一つにconcatする - Qiita
GitHub - yeoman/grunt-usemin: [UNMAINTAINED] Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)![GitHub - yeoman/grunt-usemin: [UNMAINTAINED] Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)](https://cdn-ak-scissors.b.st-hatena.com/image/square/097069180f738f9d321d76db56be3b4d0a5cc3e4/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F330ddaffa62447d235de65e490f47fb22490e0c173f1f375ca46b3949f26c3ea%2Fyeoman%2Fgrunt-usemin)
Domain error
http://flippinawesome.org/2014/05/29/building-your-first-grunt-plugin/
