grunt Gruntは自身の全てのメソッドとプロパティをgruntオブジェクトからアクセス出来るようにしています。 このオブジェクトはmodule.exports関数によって、Gruntfile、Gruntプラグイン内、タスク内に渡されます。 grunt.config Gruntファイルによって定義されたプロジェクト固有の設定データにアクセスします。 grunt.event Gruntのイベントに関する処理です。 grunt.fail エラーが発生、またはエラーが発生しそうな場合に、その対処をしたり警告を発するための機能です。 grunt.file ファイルを取り扱うための機能です。 grunt.log ログ出力を取扱うための機能です。 grunt.option Gruntのオプションを取り扱うための機能です。 grunt.task 外部タスクの登録、実行、ロードを行います。 grunt
Grunt exposes all of its methods and properties on the grunt object that gets passed into the module.exports function exported in your Gruntfile, Grunt plugin or in a tasks file. Nearly all of the following methods are defined elsewhere, but are provided directly on the grunt object for convenience. See the individual api section docs for detailed explanations and examples. Config grunt.initConfig
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の日本語リファレンスです。 Gruntの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.04.15 サイトをオープンしました。 概要 何故タスクランナーを使うのか? 一言で言えば、自動化のためです。 ファイル圧縮、コンパイル、単体テスト、Lintなどの繰り返し実行しなければいけないタスクを自動化することで、仕事を楽にしてくれます。 タスクランナーを設定すれば、こういった冗長的なほとんどの仕事を、あなたやチームのために行なってくれます。 何故Gruntなのか? Gruntエコシステムは、巨大で日々成長しています。 Gruntを使って文字通り何百ものプラグインから選択し、最小限の努力で自
現場で使えるGrunt入門 第1回 Gruntを試そう シリーズ第1回目はGruntの概要、インストール方法、簡単なタスクの実行方法までを解説しつつ、Gruntを使うための開発環境を整えます。Gruntのちょっとややこしい仕組みや、なぜそのような仕組みが必要なのかについても解説します。 はじめに このシリーズでは、JavaScriptで書かれたタスクランナー、Gruntについて、基本的な部分を解説します。なお、この記事は、Grunt version 0.4.0 の時点で書かれたものです。全3回で構成されています。 サンプル集 本シリーズで使うサンプルは、以下よりダウンロードできます。 pxgrid/codegrid-grunt · GitHub 第1回目では、Gruntの概要、インストール方法、簡単なタスクの実行方法までを解説します。 Gruntってなに? みなさんは、jQueryを使う時
JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール(Grunt、Yeoman、Bowerなど)やエディター、IDE、実行環境などを紹介していく連載。 gulp.jsで始めるWeb開発爆速自動化入門: 便利なGruntの弱点を補うgulp.jsのインストールと使い方 タスク自動化のためのビルドツールgulpの概要と、Gruntとの違い、セットアップ方法や基本的な使い方、よく使用する主なAPI5つなどを紹介します。(2014/8/19) Gruntで始めるWeb開発爆速自動化入門(終): あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方 JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツールなどを紹介していく連載。今回は、プロジェクトひな型生成の「Yo」とパ
@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
grunt-webfontで書き出されるwebフォントの文字列を変更 Gruntで web フォントを管理するためのプラグイン「grunt-webfont」の書き出し形式をカスタマイズしてみました。 grunt-webfontの利用方法はMOLの「HTTPリクエストを減らすために【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ — MOL」を参考にしてください。 ただし、このままでは「myfont-b5fd89266afbbfbfc281a0ce9a5bf50e.eot」や「myfont-b5fd89266afbbfbfc281a0ce9a5bf50e.ttf」といったランダムな文字列が追加されたweb フォントが出力されます。 このランダムな文字列はGruntのoptionsでhashes:falseを指定すると出力されなくなります。 webfont: { icons:
いまやさんからバトンタッチ! みなさんこんにちは! すっかりフロントエンド開発では定着したGruntの話はもう飽きてると思いますが、今日はフロントエンドではなく、バックエンドエンジニア向けにどう活用できるかをご紹介したいと思います。 ※このエントリは GREE Advent Calendar 2013 9日目の記事です。 自己紹介 石川将行と申します。IDは ishikawam か M_Ishikawa です。ソーシャルゲームの開発エンジニアです。 ぼくのチームではGruntはフロントエンド(HTML, JS, CSS等マークアップ)制作のエンジニアだけでなくバックエンド(PHP等サーバサイド)開発のエンジニアも使ってます。 双方ともに同じリポジトリで同じGruntの設定(=Gruntfile.js)を共有しています。 Gruntはプロジェクトをビルドするためのスクリプト(タスク)を自由に
Gruntについて最新の気持ち ::ハブろぐ 上記のブログエントリを読んで非常に今自分が感じていることと共通点を感じました。 Gruntに対する最新の気持ちでは2つの問題提起がされてました。 1. Gruntfile.jsが長すぎる(700行とか) 2. そもそも全部gruntでやらなきゃいけないのか 1.に関しては色んな解決手段があります、ブログの筆者も解決されているようですし、この件に関しては次回のMaintainable Gruntfile.jsで触れます。 最初は2.に関しての、全部gruntでやらなきゃいけないんだっけ、という疑問に関してです。 僕も同じ思いをしてたので、同調してブログを書きます。 gruntについて 言わずと知れたタスクランナーですね、gruntを使うとjavascriptのminifyやmeta cssのコンパイルといったフロントエンドにありがちな作業を自動化
This is the first in a two-part series. See Part 2 of our build and deploy process. Like any good startup, we try to leverage off-the-shelf tools to save time in our development process. Sounds simple enough, but the devil is in the details, and sometimes a custom solution is worth the effort. In this post, I’ll describe how and why we replaced the Rails asset pipeline with a Grunt-based system. I
「今どきのGruntを使ったフロントエンド開発(HTML/CSS編)」HTML5 Conference 2013 セッションレポート 出口 達也 2013年11月30日(土)に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発(HTML/CSS編)」の内容をご紹介します。 なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。 なぜGruntを使うのか Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション(JavaScript Task Runner)です。 Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきた
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のイ
If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in. But what do you use if the project is primarily JavaScript? That’s the problem Ben Alman set out to solve when he created Grunt. What is Grunt, Anyway? What exac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く