GitHub - sebdeckers/grunt-rev: :punch: Asset revving for Grunt.jsYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
WebStorm + TypeScript + Gruntな作業環境を作る | JLINE.create();
単独作業&JavaScriptメインのとある案件で必要に感じ環境を作ったので備忘録もかねて。 WebStormは以前から使用していて、TypeScriptは趣味で少し触った程度。Gruntに関しては今回が初めてで、 あと黒い画面は苦手です。 WebStorm？ HTML/CSS/JavaScriptの統合開発環境で、JavaScript版FlashDevelopのようなものを探していて辿りつきました。 素早い構文チェックと強力なコード補完機能、そして記述ルールなど各種設定項目の豊富さ柔軟さが気に入っています。 TypeScriptも標準でサポート。 TypeScript？ Microsoft社が開発するいわゆるaltJSの内のひとつ。 JavaScriptの拡張(スーパーセット)というスタイルで、既存コードの流用も比較的スムーズかつ、コンパイル後も読みやすい。 しかし反面、クラス
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
タスクを並列超速化する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
ページ表示速度の問題チェックをしてくれるgrunt-pagespeedについて紹介するよ - Qiita
Gruntfile.js grunt-pagespeed タスクをロードするように追記し、pegespeedタスクを定義します。 ここではPageSpeedのデスクトップ版チェック、モバイル版チェックを定義しています。 module.exports = function(grunt) { grunt.initConfig({ pagespeed: { desktop: { options: { paths: ['/', '/bijin-zoroe/', '/bijin/1134'], locale: 'ja_JP', strategy: 'desktop', threshold: 70 } }, mobile: { options: { locale: 'ja_JP', strategy: 'mobile', threshold: 65 } }, options: { key: 'API_
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる grunt-connect-proxy を紹介するよ - Qiita
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる grunt-connect-proxy を紹介するよPHPJavaScriptgrunt grunt-connect-proxy grunt でプロキシサーバをたてることが出来るプラグインです。 npm i -D grunt-connect-proxy 特徴 もう単純にリバースプロキシするだけです。はい。 でもそれだけだと利点が分かりませんです。はい。 なので以下利点を2つ。 クロスドメイン問題の回避 開発サーバで 複数ポート / 複数FQDN を 同一ドメイン下で リクエストハンドリング出来るようになります。 例えば 本番環境ではAPI実装とアプリ実装が同一なのに、easymock などの APIモックサーバと開発サーバが別立ての場合、クロスドメイン制約があったりして色々と面倒です。 それらを grunt-connect
Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass
The bigger the Sass project you work on, the slower compilation of your Sass project can become. That's because ordinarily Sass is Ruby based and there's never been a way around that. Until now. If you are interested in Libsass, you might be interested to read another post about migrating a code base from a Ruby based Sass compiler to Libsass? If so, take a look at ‘Is Libsass, the lightning fast
オレ的Gruntに対する最新の気持ち - from scratch
Gruntについて最新の気持ち ::ハブろぐ 上記のブログエントリを読んで非常に今自分が感じていることと共通点を感じました。 Gruntに対する最新の気持ちでは2つの問題提起がされてました。 1. Gruntfile.jsが長すぎる(700行とか) 2. そもそも全部gruntでやらなきゃいけないのか 1.に関しては色んな解決手段があります、ブログの筆者も解決されているようですし、この件に関しては次回のMaintainable Gruntfile.jsで触れます。 最初は2.に関しての、全部gruntでやらなきゃいけないんだっけ、という疑問に関してです。 僕も同じ思いをしてたので、同調してブログを書きます。 gruntについて 言わずと知れたタスクランナーですね、gruntを使うとjavascriptのminifyやmeta cssのコンパイルといったフロントエンドにありがちな作業を自動化
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
concat/minifyしたファイルへのリンクを grunt-usemin を使って自動で書き換える
最近、HTML,CSS,JavaScript を記述するのに、Jade,Sass,LESS,Stylus,CoffeeScript などのプリプロセッサが便利で使っていますが、CSSFrameworkを利用することもありファイルが複数に分かれていることが多くなってきました。 grunt に限らず自動化処理を実行して、本番環境用に結合( concat )･圧縮(minify) して複数あるファイルを1つにまとめてアップロードする方も多いと思います。 しかし、HTML内で CSS( meta link=~ ) JavaScript (script src=~) は 本番環境では minifyファイルを、開発環境では元々の複数にわかれたファイルのパスを設定することになります。 (Sassのinclude 等を使えば最終的には1ファイルに纏まりますが、CSSファイルのみの構成などもあるので････
最近のオレオレconcatパターンとか
concatパターンの小ネタ 最終的には、1つに結合される予定の個別ファイル ( 例 Phalanx/src/view.js ) において (そのファイル内の)グローバルに use strict 書いておきたい ひとつひとつにファイルに即時実行関数パターンを書きたくない 'use strict' var View = defineClass({ constructor: function() { // 初期化とか }, // 以下クラス定義 }); こんな感じで、余計なラップを書かずに1ファイルの中身を完結させたい。 という条件を満たすために下記のような grunt-concat の設定を使っている。 var RE_USE_STRICT_STATEMENT = /(^|\n)[ \t]*'use strict';?\s*/g, BANNER_TEMPLATE_STRING = '/*! <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - benhoIIand/grunt-cache-bust: Cache bust static assets using content hashing
GitHub - leemunroe/grunt-email-workflow: A Grunt workflow for designing and testing responsive HTML email templates with SCSS.
GitHub - TypeStrong/grunt-ts: A grunt task to manage your complete typescript development to production workflow
GitHub - ericclemmons/grunt-express-server: Grunt task for running an Express Server that works great with LiveReload + Watch/Regarde
How do I get grunt to watch and livereload with just one command - Gruntjs
GitHub - gruntjs/grunt-contrib-sass: Compile Sass to CSS.
GitHub - zauni/pngmin: Grunt plugin to compress png images with pngquant.
GitHub - gruntjs/grunt-contrib-compass: Compile Compass to CSS.
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
