» GulpでSassのコンパイルとlivereloadをやってみる | isee ウェブに関するブログ
Gruntと同じくタスクランナーのGulp。Gruntよりもビルドファイルが読みやすく、スピードも軽快な気がします。GulpとGrunt Gruntに関しては前回の記事で(タスクランナーGrunt導入メモ)導入方法と簡単な使い方を紹介しましたが、今回はGruntと同じタスクランナーのGulpでSassのコンパイルとブラウザを自動で更新するlivereloadを使ってみたいと思います。 Gulpのいいところ Gruntと大きく違う部分は以下になります。 ・Gruntよりもビルドファイルの可読性が良く、短いコードで済む ・なるべくタスクを並列で実行しようとするので、スピードが早い Gruntもとても優秀ですが、GulpはGruntの良い部分を引き継ぎ、短所を改善したツールだそうです。そのためビルドファイルの書き方や導入方法はGruntと似ているので、Gruntを使ったことのある人は、使いや
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プロパティ名の
GRUNT AND GULP TASKS FOR PERFORMANCE OPTIMIZATION
Delays in performance have the potential to impact user engagement, experience and revenue. Thankfully, Google’s ‘Make The Web Faster’ team recommend a set of best-practice rules for keeping your pages lean, fast and smooth. These include minifying resources like CSS and JavaScript, optimizing images, inlining and removing unused styles and so on. If you have complete control over your server, an
タスクを並列超速化するgrunt-parallelizeを紹介するよ - teppeis blog
この記事は Grunt Plugins Advent Calendar 2013 23日目の記事です。 Gruntタスクを並列で実行するプラグイン grunt-parallelize を紹介します。 ある程度プロジェクトが大きくなるとJavaScriptが1500ファイルとか超えてきてJSHintにくっそ時間かかるみたいなことがよくあります。JSHintを含む多くのNode製ツールはシングルプロセスなので、普通に実行しちゃうとマルチコアなCPUが遊んでてもったいないわけです。 そんなときにgrunt-parallelizeを使うと、指定のプロセス数にファイルリストを分割してマルチプロセスでタスクを実行してくれます。 まずはもとになるタスクのGruntfile.jsの定義。grunt-contrib-jshintを使った普通のタスクですね。 grunt.initConfig({ jshint
Gruntfile.js が長すぎてつらい人は gulp を使ってみよう - Qiita
Gruntfile.js は常々長すぎると思っていました。複数ファイルに分割しようが長いものは長いです。 最近、後発の gulp というものを見つけて使ってみていますが、いい感じです。 設定ファイルが短く書ける上に、速いです。 先日 Grunt 入門の記事「Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩」を読んで、例の Gruntfile.js と同等の内容を gulp で書いたらどうなるかなと思って書いてみました。 サンプルファイル含めたプロジェクト全体 gulpfile.js だけ 67 行から 29 行に。約半減です。また、短くなっただけではなく、処理の流れがわかりやすくなっていると思います。 var gulp = require('gulp'); var concat = require('gulp-concat'); var prefix
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タスク「grunt-combine-media-queries」
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」 CSSソース内に散らばったメディアクエリをまとめたいと思って調べたらGruntタスク「grunt-combine-media-queries」に行き当たりました。 CSSソース内に散らばったメディアクエリとはどういうことかというと、レスポンシブWebデザインでPC向けとSP向けのCSSを記述しなくてはいけないときに、以下のようにPC向けとSP向けの記述をなるべく近くに書くことでCSSのメンテナンス性が高まる反面、１つのCSSファイルに同様なメディアクエリが散らばってファイルサイズを増加させてしまいます。 .header{ width:950px; } @media screen and (max-width: 640px) { .header{ width:auto; } } .footer
[grunt] Gruntfile.jsをチーム共有用と個人用にファイル分割して、gitやsvnのコンフリクトを減らす方法 - YoheiM .NET
[grunt] Gruntfile.jsをチーム共有用と個人用にファイル分割して、gitやsvnのコンフリクトを減らす方法 こんにちは、@yoheiMuneです。 本日はチームでgruntJSを使った開発を行う際に、よく困るGruntファイルのコンフリクト。 チーム共有のGruntfile.jsと、個人が自由に利用するGruntfile.jsを別々のファイルに分割して管理してコンフリクトを減らす方法を、ブログに書きたいと思います。 GruntFile.jsをチームで共有するとファイルのコンフリクトが大変 GruntJSは、JSのミニファイが出来たりCSSプリプロセッサのコンパイルが出来たりと便利なのですが、数人のチームで開発していると、個人毎にGruntfile.jsをカスタマイズしたくなることが多いです。 例えばある人は、ファイルサーバーへアップロードするためのsftpやrsync用のタ
![[grunt] Gruntfile.jsをチーム共有用と個人用にファイル分割して、gitやsvnのコンフリクトを減らす方法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/7774f965f2d7982cda4820afdaf7d164cfda1c7b/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F228.jpg)
合コン失敗したら風俗
女子大生がたくさん働いているデリヘルのサービス。深夜でも使える風俗として、自分の暮らしを豊かにしてくれているデリヘルです。有名大学に通う女性を指名した今回は、思い出しただけでも興奮が甦ってくるほど。素股の気持ち良さは挿入を超えるくらいの感覚でした。その秘密は敏感なクリにあります。素股をするとどんどん刺激されてクリが固くなり、それが亀頭に当たって気持ち良い。相手も擦れて気持ち良いという相乗的な魅力に浸るのが、今までの風俗史上最高の体験になったのです。素股はぎこちなさもあるのですが、それでも密着度が高くてアソコへの刺激は十分すぎるほど。途中で耐えることを諦めていれば、きっとサービスから半分も消化しないうちに果ててしまっていたと思います。しかし、僕は風俗MASTERです。そんなことできません。キスも大好きらしく、クンニをした後でも何度となく「チューしてほしい」とお願いされたので、舌を絡めてじっく
grunt-text-replaceでテキスト置換 | DevelopersIO
テキスト置換を一括で 最近お気に入りのGruntの話です。 Gruntではテキスト置換もプラグインを使って簡単にできます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.41 grunt-cliをグローバルオプションを付けてインストールしておきます。 % npm install -g grunt-cli そして、npmを使ってpackage.jsonを作成しましょう。 % mkdir grunt-replace % cd grunt-replace % npm init //全部デフォルトで作成 最後に、gruntモジュールとgrunt-text-replaceモジュールのインストールをしておきましょう。 --save-devオプションをつけると、packag
Grunt 日本語リファレンス | js STUDIO
このサイトについて Gruntの日本語リファレンスです。 Gruntの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.04.15 サイトをオープンしました。 概要 何故タスクランナーを使うのか？ 一言で言えば、自動化のためです。 ファイル圧縮、コンパイル、単体テスト、Lintなどの繰り返し実行しなければいけないタスクを自動化することで、仕事を楽にしてくれます。 タスクランナーを設定すれば、こういった冗長的なほとんどの仕事を、あなたやチームのために行なってくれます。 何故Gruntなのか？ Gruntエコシステムは、巨大で日々成長しています。 Gruntを使って文字通り何百ものプラグインから選択し、最小限の努力で自
Gruntfileを整理してタスクの自動化を進めた
(急遽宣伝) FrontrendでGruntします Frontrend（フロントレンド） Vol.3 powered by CyberAgent : ATND Frontrend（フロントレンド）とは サイバーエージェントが主催するフロントエンド系技術セミナーです。 HTML5/CSS3やJavaScriptのトレンドやノウハウ等を惜しみなくお伝えします。 2012/10/21（日）の午後に、FrontrendでGruntのことを紹介させていただく運びになりました！以下の記事は色々と知ってる前提な内容になってしまっているので、ベーシックな所から知りたい方には特にオススメです。 今回のFrontrendはスピード特集ということで、ページパフォーマンスの最適化はもちろん、CSSプリプロセッサの導入や、ガイドラインの運用による業務効率のカイゼンにも踏み込んでスピードを上げていきます！ということで
コーダーさんの為のGrunt入門（前編）〜導入編 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 以前はmakeを使って納品用のデータをビルドしていたりしたのですが、 去年くらいから代替にGruntを使ってみています。 この度0.3.xから0.4系に切り替えたので、覚書も兼ねてGruntの導入・使い方を記しておきます。 Gruntってなに Gruntを導入する 使ってみよう どんなタスクがあるの？ その他Gruntの魅力 まとめ Grunt ってなに GRUNT: The JavaScript Task Runner Gruntはnode.jsベースで作られたタスクベースのコマンドラインビルドツールです。 ビルドツールってなに ビルドは、ソースファイル群を元にして、実行出来る成果物を生成するプロセスの事を指します。 cf) ビルド (ソフトウェア) – Wikipedia 鍋に鶏と野菜とコンソメを入れて煮込んだらポトフが出来
[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました - YoheiM .NET
[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました こんにちは、@yoheiMuneです。 Compass(Sass)を仕事で使うのですが、@extendとかがいっぱいあるとビルドに時間がかかるようになってきました。 今回は、その対策としてgruntのタスクとして、compassビルドをマルチスレッドで高速化するタスクを作ったので、紹介させて頂きたいと思います。 Compassのビルドは時間がかかる？ Compassってすごく便利なツールで、CSSをモジュールか出来たり案件ごとに使い回したりして、CSSのコーディングの効率化が出来ます。 でも、画像のBase64化やSprite化、@extendで共通Compassモジュールを使うコードなどが増えると、コンパイルに時間がかかってきます。 自身が関わっている案
![[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/be8a85a78049a62f12c7fca35a7418bb8dcd8564/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F217.jpg)
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
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.
ビルドプロセスの自動化で効率アップ
Grunt.jsの紹介スライドです。package.jsonの扱いや、grunt自身の0.4.0対応が弱い部分が残りますが、数ヶ月前というところでご容赦くだされば、おおまかな概要を示しています。
gruntをインストールする - Windows Vista | jekylog
ちなみにMacも下記とほとんど相違ないけどハマったんで一応メモってる gruntそのものはtakazudoさんのhamalogで知ってたけどなかなかどういう場面で必要になるか分からなかったので手を付けれなかったけど、実現したい事の解決方法としてマッチしたので参考にさせてもらいながらgruntをインストールしてみた。 node.jsとnpmをインストール ネットの情報ではnpmをWindowsで使うには結構手法が違ってたりしてたけど小粋空間さんによると公式のパッケージをインストールすればデフォで入ってるっぽい。 「npm」という、Node.js用のパッケージマネージャも一緒にインストールされており（ネットで調べると以前は別にインストールする必要があったようですが不要）、同じフォルダにある「npm.cmd」が該当します。 ちなみにコマンドプロンプトで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
npm-check-updates を使ってnode moduleをアップデート
https://qiita.com/t32k/items/9e03e80061de21411765
Loading...
