https://github.com/gruntjs/grunt-contrib-copy/issues/60 GithubのIssueでも語られていますが，grunt-contrib-copyのパスの指定方法に注意が必要だったのでメモします． 指定フォルダ内のファイルを階層を維持しながら別の場所へコピーしたい場合cp path/* dest/のつもりで以下のように指定すると思った通りのパスへコピーしてくれません． copy: { dame1: { //ダメ files: [{src: 'path/**', dest: 'dest/'}] }, dame2: { // これもダメ files: [{expand: true, src: ['path/**'], dest: 'dest/'}] } } 上記コードではdest/path/内に階層を維持しながらファイルがコピーされてしまいます．
t32k/grunt-csso YUI CompressorやClosure CompilerのようなJavaScriptのMinifierはいろいろ存在する。CSSも同じようにgrunt-contrib-cssminで採用されているclean-cssのほかにcssoというものがある。 今回紹介するgrunt-cssoはcssoを使ってCSSを圧縮するgrunt-pluginである。 JavaScriptのMinifierに関してはそのMinifiyの技術に関していろいろ話題に上がることだが、CSSはどうだろうか。CSSのMinifierなんて改行や空白を取り除くしかできないんでしょ？って思っている方が多いだろうと思う。しかし、cssoは違う。 CSSO (CSS Optimizer) is a CSS minimizer unlike others. cssoのREADME.mdには上記
Gruntfile.jsの大半を占めるのはタスク設定の部分だ。そこを分割してやればGruntfile/jsを小さく出来るわけで、そういうNode.jsパッケージはいくつかある。load-grunt-configsがその最も有名と思われるものだが、汎用化してあり、便利すぎ・パワフルすぎで、ちょっと仰々しすぎる気がした。もっとストレートにやっても良さそうなので、5行くらいで指定ディレクトリから設定を読み出すコードを書いて、少し使ってみた。 以下のGruntプラグインをインストールして使うGruntfile.jsを例にする。 grunt-contrib-clean grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-uglify Gruntfile.jsの書き方 grunt.file.expand()を使って.grunt/config/*.
多数の小さな画像を 1 枚の画像の上に並べ、CSS で切り分けることにより、サーバへの問い合わせの回数を減らして Web ページの表示を高速化する CSS スプライトと呼ばれる手法がある。これまで Sass + Compass ではできていたが、Grunt をはじめとする自動化ツールが充実してきたおかげで LESS でも可能になった。 あらかじめ Grunt と grunt-spritesmith をインストールし設定しておく。方法は先日の記事を参照。 Grunt を使って LESS のコンパイル環境を作る grunt-spritesmith を Mac (OS X Mavericks) にインストールする grunt-spritesmith を Windows にインストールする Gruntfile.js を書く 通常と同じように loadNpmTasks() でタスクを読み込み、 in
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 2日目は、HTTPリクエストを減らす最もポピュラーな手法、CSSスプライトについて説明する。 まずは動画をご覧頂きたい。 img要素読み込み | WebPagetest Test Result CSS Sprite読み込み | WebPagetest Test Result 左が30個のアイコン画像を一つ一つimg要素として読み込んでいるのに対して、右は１つの背景画像（CSSスプライト）として読み込んでいる。この場合、
納品時には、少しでもページを速く表示させるために、CSS・JS・画像の圧縮などファイルを最適化し、Webサイトを高速化することは必要不可欠です。 ファイルを圧縮するには、アプリを使ったりWebサービスを使ってもできますが、一つ一つ行うと時間がかかってしまいます。作業漏れの原因にもなります。 そこで、納品前の面倒な作業をGruntでまとめて行いたいと思います。Gruntを使うことによって、Sass(SCSS)のコンパイルやHTMLの量産を簡単に出来たりするので、とても便利なツールです。事前にGruntのインストールと、SassとCompassのインストールを行ってから、ぜひ以下の手順でお試しください。 今回、Gruntでやることは下記の通りです。 HTMLファイルの圧縮 CSSファイルの圧縮 画像ファイルの圧縮 JSファイル圧縮 不要なファイル・フォルダの削除(Comassでスプライト画像を
今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。 ※Sass・Compassはインストールされているものとします。 Gruntで処理したいこと Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。 今回、下記の機能も使ってみたいと思います。 Sassファイルをコンパイルする livereloadでSassファイルが更新されたらブラウザをリロードさせる バラバラに記述されたメディアクエリをまとめる CSSのプロパティの順番を揃える フォルダ構成 フォルダ構成については下記の通りです。 project ├css (CSSの出力先) ├sass │└sty
Yeoman を勘違いしてスルーしてたところもあったので、 改めてこんなメリットがあるんだーみたいなところを共有しつつ、 必要性を感じられる人が使い始める機会になれればと思います。 僕もこれからちょいちょい使っていきたいです。Read less
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
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-
いまやさんからバトンタッチ！ みなさんこんにちは！ すっかりフロントエンド開発では定着したGruntの話はもう飽きてると思いますが、今日はフロントエンドではなく、バックエンドエンジニア向けにどう活用できるかをご紹介したいと思います。 ※このエントリは GREE Advent Calendar 2013 9日目の記事です。 自己紹介 石川将行と申します。IDは ishikawam か M_Ishikawa です。ソーシャルゲームの開発エンジニアです。 ぼくのチームではGruntはフロントエンド(HTML, JS, CSS等マークアップ)制作のエンジニアだけでなくバックエンド(PHP等サーバサイド)開発のエンジニアも使ってます。 双方ともに同じリポジトリで同じGruntの設定(＝Gruntfile.js)を共有しています。 Gruntはプロジェクトをビルドするためのスクリプト(タスク)を自由に
Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin
Koji Ishimoto gives a presentation on front-end engineering. He defines a front-end engineer's responsibilities as including JavaScript, version control with Git, modular code, browser developer tools, command line, templating, CSS preprocessors, testing, automation, code quality and manuals. He discusses common front-end tools, managing tools with Grunt, and tracking speed with tools like WebPage
この記事は賞味期限切れです。（更新から1年が経過しています） 以前はmakeを使って納品用のデータをビルドしていたりしたのですが、 去年くらいから代替にGruntを使ってみています。 この度0.3.xから0.4系に切り替えたので、覚書も兼ねてGruntの導入・使い方を記しておきます。 Gruntってなに Gruntを導入する 使ってみよう どんなタスクがあるの？ その他Gruntの魅力 まとめ Grunt ってなに GRUNT: The JavaScript Task Runner Gruntはnode.jsベースで作られたタスクベースのコマンドラインビルドツールです。 ビルドツールってなに ビルドは、ソースファイル群を元にして、実行出来る成果物を生成するプロセスの事を指します。 cf) ビルド (ソフトウェア) – Wikipedia 鍋に鶏と野菜とコンソメを入れて煮込んだらポトフが出来
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
