minimatch（node.js で path match するライブラリ）のチートシートを作った - 詩と創作・思索のひろば
minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任
あなたの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プラグインを紹介するよ - Qiita
スマートフォン向けのサービスなどを開発しているとき、3G回線の様な低速な環境での振る舞いを確認しなければならないときがあります。 白ロムでWifiしか使えない場合や、パブリックなとこに置けないために実機での確認に一手間かけなければならないときもあると思います。 有名な方法としてはCharlesのようなローカルプロキシでスロットリングを行う方法があります。 ただCharlesは有料なので開発している全員の環境に入れられるかと言えば少し難しいです。トライアルもありますが常用するには厳しいと思います。 もっと手軽にやりたい。。 grunt-throttle そこで登場するのがgrunt-throttle！ tjgq / grunt-throttle 使い方も超簡単 インストール
Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear
Gruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。 ちなみに、Gruntの導入方法や基本的な解説は下記の記事がとてもわかりやすく紹介してくれていますので、これから導入したいという方がいましたら是非参考にどうぞ。 Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 – Web Design KOJIKA17 コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 – OZPAの表4 今更だけどやるgrunt入門編・インストールから基本的な使い方 – WEB Drawer Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 – WWW WATCH また、この記事はSass/Compass、ブラウザのliveReloadを使用することを前提に書いてい
Gruntとgulp.jsでサイトパフォーマンスを向上させる - ワザノバ | wazanova
@yosuke_furukawaさんがtweetしていたサイトパフォーマンスに関連する Gruntとgulp.js のタスク一覧です。確かによいまとめなので、メモしておきます。 GruntとGulpには、画像の最適化、HTML/CSS/JavaScriptファイルの結合 & 圧縮をするタスクがあるので、まずそちらをベースラインとして利用されたし。 1) 画像ファイルの圧縮 & 最適化 webページは平均1.5MBで画像ファイルが多くを占める。モバイルで160KBの画像ファイルを追加すると直帰率が12%悪化すえるというEtsyのデータがあり。 Grunt grunt-contrib-imagemin grunt-imageoptim (OSXのみ） 二つのタスクのどちらを選ぶかは、こちらの比較表 で確認してください。 Gulp gulp-imagemin 3/4/2014時点ではImage
MarkdownからEPUB データを生成する「grunt-mdeb」を書いてみた - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 先日の記事で軽く触れた、Markdown から EPUB データを生成する Grunt タスクの体裁を整えてパブリッシュしてみました。 mach3/grunt-mdeb @ GitHub Grunt task to publish markdown docs as EPUB 3.0 book. Markdown書類とJSONの設定ファイルからEPUBデータを作成します。 ナビゲーションドキュメント（論理目次＋視覚目次）はMarkdownを元に出力されるXHTMLから抽出されて自動的に生成されます。 名前の「mdeb」は「Markdown to eBook」の略です。 動作環境 タスクの中でシェルコマンドを叩いている箇所があるので、 bash等が動く環境でないと動作しません。 Mac OSX や Linux なら問題ありませんが、
gulpでSassのコンパイルやlivereloadなどを試してみた
※過去記事のメンテナンスは通常やっていないのですが（当時の記録を残す意味でも）、最近閲覧してくださる方も多いので、研究も兼ねて2014年7月23日に少し追記等を行いました。 ※2015年2月に書き直したgulpfileを、「My gulpfile.coffee (Early 2015) でSassのコンパイルとか」で紹介しています。 ※gulp-ruby-sassの記述方式の変更について追記しました。 2012年にGruntを知ってから便利に使わせてもらっていますが、最近話題になっているgulp.js（以下gulp）を試してみました。今のところGruntには大きな不満はないのですが、万が一に備えて代替手段を用意しておく方が良いと考えていること、そしてGetting started with gulp -- Mark Goodyear — Front-end developer and de
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
Gruntのtaskの実行にかかる時間を劇的に短縮する方法 - Qiita
最近ではGrunt無しでのフロントエンド開発は考えられなくなってきた気がしますが、大抵taskを実行した際に結構時間がかかってしまいます。 Gruntの実行にかかる時間を減らすにはどうすれば良いのか調べてみたら、loadTasks as they are needed to speed up Grunt load time · Issue #975 · gruntjs/gruntのissueに方法がありました。 何に時間がかかっているか taskを走らせた際、何で時間がかかっているのかをtime-gruntで確認してみると、実行しているtask自体ではなくnpmタスク(適切な表現かは分かりませんがGruntプラグインの事です。)の読み込みの方に時間がかかっている事が分かります。 loadNpmTasks()で2秒はかかっている状態 npmタスクの読み込みに何故時間がかかるかというと、Gru
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
JSコードの品質チェックをしてくれるgrunt-platoについて紹介するよ - Qiita
grunt-platoとは platoというツールから、JavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるGruntプラグインです。 https://npmjs.org/package/grunt-plato https://github.com/jsoverson/grunt-plato platoとは 上でほとんど書きましたが、platoはJavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるNode製のツールです。 https://github.com/es-analysis/plato platoではjQuery, Grunt, marionetteのレポートをサンプルとして公開してくれてるので、まずはこれらを見て、どのようなものなのか知ってください。 http://es-analysis.gith
grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった
最近、Grunt と grunt-contrib-watch を使っているのだけど、grunt-contrib-watch が CPU を消費しがちである。 watch 対象のファイルが少ないうちは grunt-contrib-watch は問題なく動くんだけども、ファイル数が増えてくると CPU の消費量が増えてくる。自分の環境では、1,000 個ぐらいのファイルを監視していると、常時 10% 程度 CPU を消費している。 この問題は既知であり、FAQ には次のように書いている。 たくさんのファイルを監視している場合、デフォルトの interval の値が小さすぎるかもしれない。options: { interval: 5007 } のようにして増やしてみてほしい。詳しくは issues #35 と #145 を参照のこと (※日本語訳は私によるもの) Another reason i
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のイ
grunt-releaseでversionを上げられる男になろう - Qiita
弊社の大先輩、mashさんがpull-req送っていたのを偶然見て、 grunt-releaseというプラグインの存在を知りました。 dry run support by mash · Pull Request #29 · geddski/grunt-release これが、npmやbowerにがんがんライブラリを置いている自分には、 めちゃくちゃべんりでした! bowerでライブラリ公開するハードルを下げることにもなる、 と思うのでちょっと紹介してみます。 grunt-releaseとは geddski/grunt-release grunt-releaseは、git管理しているライブラリの versionアップ時の作業を自動化してくれる gruntプラグインです。 具体的には、 設定ファイルから、現在のversionを取得 次に使うべきversionを計算 (semver形式) そのv
ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは本末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者
Grunt 日本語リファレンス | js STUDIO
このサイトについて Gruntの日本語リファレンスです。 Gruntの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.04.15 サイトをオープンしました。 概要 何故タスクランナーを使うのか？ 一言で言えば、自動化のためです。 ファイル圧縮、コンパイル、単体テスト、Lintなどの繰り返し実行しなければいけないタスクを自動化することで、仕事を楽にしてくれます。 タスクランナーを設定すれば、こういった冗長的なほとんどの仕事を、あなたやチームのために行なってくれます。 何故Gruntなのか？ Gruntエコシステムは、巨大で日々成長しています。 Gruntを使って文字通り何百ものプラグインから選択し、最小限の努力で自
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
Grunt ver0.5に向けてのロードマップ | 1000ch.net
2013/03/07 Grunt ver0.5に向けてのロードマップ Roadmap - gruntjs/grunt/wiki 先日Grunt0.4がstableになりましたが、早速0.5に向けてのロードマップが発表されていますね。 意識してないけど、アップデートの追っかけブログみたいになっているな…。 Pythonのハンズオンも消化したので後日書こうと思っています。 ロードマップもちょくちょく変わるとは思いますが、軽めになぞってみる。 タスクは全てイベントとして実行される（ようになる） 複数タスク間のデータを繋ぎ合わせて使うことが出来らしい。 CoffeeScriptのコンパイル結果をそのままUglifyでMinifyしたり。 こんなイメージらしい。 // load a set of tasks to be run in parallel grunt.registerTas
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
捗るかもしれないフロントエンド開発環境