Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
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
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる 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
Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発 - albatrosary's blog
Single-page Application(SPA)によりフロント開発にかかる手間が膨大になっています。SPAの開発をするときに通信部分（JSONやJSONPなど）をどうすればいいのかが問題になります。解答としてはスタブAPIサーバを作成し対応します。 画面開発するためにアプリケーションサーバを構築するのは時間の無駄ですのでgruntタスクにモックサーバを構築し簡単実装を行いましょう。 「本物の」APIサーバを使う場合は向きを変えることで簡単に結合テストできますし、CIを使うときはもちろんモックサーバでのテストになりますのでモックAPIサーバは活用するのが良いと考えます。 モックAPIサーバ gruntでモック用APIサーバを立ち上げるためのプラグインとして有名なものとして２つ存在します。 grunt-easymock grunt-stubby easymockはnode-easymo
GruntでWebFont作成を自動化 | Web雑記帳
WebFont作成をGrunt.jsで自動化 WebFontを作成するサービスなどには、いろいろあり便利ですが、ちょっとした修正を入れる度にWebFont化するのは面倒くさいです。そこで、grunt-webfontという便利なプラグインがあったので自動化してみました。 ここでは、macにインストールしていきます。 下準備 homebrew node grunt ここらへんをインストールしておいて下さい。 インストール grunt-webfontのreadmeに沿ってインストールしていきます。 まずはhomebrewでfontforgeとttfautohintをインストールするのですが、 readmeにnodeエンジンを使用するならfontfogeは必須でないとあるので、 ここではttfautohintのみをインストールします。 $brew install ttfautohint cairo
MinifyしてからConcat
配布されているライブラリーを最小ツールに通すと、ライセンスあたりの扱いで面倒なことになる。またCSSの場合は壊れる可能性を否定できないことは意識しなければならない。ということで重い腰を上げて、最小化してから連結するような工夫をソース・マップを維持することを前提にこのウェブサイトで実験し始めた。 JavaScriptファイルのビルドをGruntでやるとして、最小化についてはソース・マップのサポートは問題ないので、いつも通りgrunt-contrib-copyとgrunt-contrib-uglifyを使うことにする。最後に連結する時にソース・マップを維持できるのかというのが最大の問題だったが、7月にソース・マップのサポートがgrunt-contrib-copyへ入っていたため、結果的にはこれを使うだけで良かった。 タスクの手順的には以下のようになる。 一時ディレクトリーを掃除 一時ディレクト
jsdocをbootstrapできれいに生成する
Posted: February 12, 2014 / Last updated: February 12, 2014 検索してもあまり日本語の情報が出てこなかったのでメモを残しておきます。 JSDoc # JSDoc は言うまでもないですが、JavaScript のソースコードに残したコメントから自動的にリファレンスドキュメントを生成してくれるコマンドラインツール。例えばこんな感じでソースにコメントを書いておくと /** * Resolve url from `srcset` syntax http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ * @param {string} src Default URL * @param {string} srcset `srcset` argument * @param {number|undef
僕がGrunt.jsで使っているPlugin一覧 - Qiita
どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 2015-02-07: gulp編を作成 gruntからgulpへ移行したので、gulp版の一覧も作成しました。 僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可能 デフォルトでpublic-readになるので、Web関係には便利 配布元 https://github.com/MathieuLoutre/grunt-aws-s3 grunt-bless IE9のセレクタ数限界を解消する「bless」を実行できる。 昔
HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。 まずは下記の画像をご覧頂きたい。 これはプロジェクトで私が使用していたスプライト画像だが（実際は縦にして使用）、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。 このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプ
Sass/Compass よくあるトラブルと 解決方法・回避方法
14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
grunt-este-watchとgrunt-contrib-connectで軽快ファイル監視とLiveReload - Qiita
$ npm install grunt grunt-contrib-jade grunt-contrib-stylus \ > grunt-contrib-connect grunt-este-watch module.exports = (grunt) -> grunt.initConfig connect: server: options: # LiveReloadに必要なスクリプトを</body>直前に挿入してくれる # 多分grunt-contrib-connect ver.0.4.0から # HTML5などでbodyタグを書いていないと挿入してくれないみたい…… livereload: true esteWatch: options: # 監視対象のディレクトリ # ['./**']などとするとサブディレクトリを含むようになる dirs: ['.'] livereload: en
Gruntで画像最適化 - Qiita
背景 画像最適化の際にGUIを使うのは面倒 でもpngquantとかで都度コマンド実行するのも面倒 Gruntでcssとかscriptとまとめてやりたい 結論 grunt-imageを使うのが良さそう https://www.npmjs.org/package/grunt-image imageminと比較して最適化率にほぼ差がない これは私の環境だけかもしれないけど、imageminのpluginが動かないものがあったり、デフォルトでgif圧縮ができなかったり、バージョン落とすとgifは動くけどpngのpluginが〜とか、ちょっと不安定な感じがした 検証 1. grunt-pngmin 最適化に使ってるもの pngquant Gruntfile.jsへの記述 pngmin: { target1: { options: { // pngquant実行のオプションをここに speed: 1
Grunt 日本語リファレンス | js STUDIO
このサイトについて Gruntの日本語リファレンスです。 Gruntの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.04.15 サイトをオープンしました。 概要 何故タスクランナーを使うのか？ 一言で言えば、自動化のためです。 ファイル圧縮、コンパイル、単体テスト、Lintなどの繰り返し実行しなければいけないタスクを自動化することで、仕事を楽にしてくれます。 タスクランナーを設定すれば、こういった冗長的なほとんどの仕事を、あなたやチームのために行なってくれます。 何故Gruntなのか？ Gruntエコシステムは、巨大で日々成長しています。 Gruntを使って文字通り何百ものプラグインから選択し、最小限の努力で自
grunt-ect テンプレートを使って HTML を生成する | DriftwoodJP
'use strict' module.exports = (grunt) -> # プラグインの読み込み grunt.loadNpmTasks 'grunt-ect' # グラントタスクの設定 grunt.initConfig # config dir: src: 'src' dest: 'dist' pkg: grunt.file.readJSON "package.json" # grunt-ect ect: options: root: '<%= dir.src %>/template' index: src: 'index.ect' dest: '<%= dir.dest %>/index.html' variables: title: 'タイトル' description: 'サイトの説明です。' news: src: 'news/news.ect' dest: '<%= di
rh7's blog
gruntってのは、JS/CSSをまとめたり、JS lint, Qunit, minifyできたりってのができるビルドツールです。 また、minifyなどの組み込みタスクの他に、RakeやAntと同じようにカスタムタスクを記述して実行することも可能です。 さらに、watchというので、対象のファイルを監視して、それをトリガーとしてタスクを実行することも可能です。(inofityみたいなやつ) 他の類似ツールと比べて、簡単に使えたのでメモとして残しときます。 環境 OS: MacOSX 10.7 実行環境: Node.js(Homebrew) パッケージ管理: npm 手順 node環境のインストール 面倒なので(ry この辺みてインストールしてください。 naveを使ったnode.jsインストールと、最近のnpmの使い方 - ラシウラ Nodeとnpmのインストール - 自分の感受性くらい
gruntで快適JS/CSSビルド生活
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux) cowboy/grunt - GitHubこのgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。 似たモノで、MakeとかRakeとかCakeとかそういう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -
フロント作業の効率化
webstormを使っているとgrunt-este-watchでファイルの変更が検知されない場合
https://github.com/t32k/grunt-kss/issues/4