GitHub - dbushell/grunt-svg2png: Grunt plugin to rasterize SVG to PNG images using PhantomJSYou 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
必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA
みなさんはタスクランナーを使用していますか？ タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp（ガルプ）とGrunt（グラント）がよく使われています。 本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します（記事末尾で付録としてインストール方法を解説しています）。 ※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。 この記事は2018年12月にリリースされたGulp 4に対応しています ファイルの複製 作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利
JavaScript作業自動化ツール「Grunt 1.0.0」が登場。約2年もの開発停滞から復活
Webサイトやアプリケーション開発で発生する作業を自動化してくれるツール「Grunt」の正式リリースとなる「Grunt 1.0.0」がリリースされました。 Gruntは、いわゆるビルドツールやタスクランナーと呼ばれるソフトウェアの1つで、Node.jsをベースにしたオープンソースとして開発されています。 JavaScriptで自動化したい作業を記述でき、また多くのプラグインによって一般的な作業の多くを簡単に自動化できます。例えば特定のディレクトリを監視し、そこに保存されたファイルを自動的に処理する、といったことが可能です。 特にWebサイトやWebアプリケーション開発で発生するタスク、例えばJavaScriptファイルのミニファイ（最小化）、自動ユニットテストの実行、文法チェックなどでよく使われています。 昨年jQuery Foundationに加入し、復活したGrunt Gruntは20
案件テーマ開発環境 : WordPress | FindxFine
WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作でテーブルを作成するアドオンを公開しています。 EC-CUBE3 EC-CUBE3のプラグインは2016年1月28日(木)に開発元である株式会社ロックオン主催のEC-CUBEプラグインアワード3.0で開発プラグインInfoTownLinkWpがCPI賞と入選のW受賞を果たしました EC-CUBEプラグインアワード3.0 結果発表 / ECサイト構築・リニューアル / E
【Grunt】styledoccoでCSSスタイルガイドを自動作成をしてみる。 | DevelopersIO
アジェンダ styledoccoとは? 導入準備 Gruntの設定 CSSのコメント記述方法 動作確認 styledoccoとは？ Node.jsを使用して、CSSのスタイルガイドを作成してくれます。 導入準備 今回はNode.jsのパッケージを使用します。当ブログでも環境構築のご紹介していますので、以下を参考にNode.jsをインストールしてください。 【もうすぐバレンタインデー】デザイナーがCoffeeScprit、TypeScriptの開発環境（Win/Mac）をインストールしてみる 今回の動作環境 OS:windows7 Gruntをインストールする。 今回styledoccoを自動化するに際に、Gruntにお世話になるので以下コマンドからGruntをインスールします。 npm install -g grunt npm install -g grunt-cli gruntで自動化し
Javascript source analytics with grunt-plato
Gruntのpluginでgrunt-platoというのがあって、Platoを使ってJavascriptの静的解析結果をvisualizeしてレポートしてくれます。 レポートのサンプルがいくつか載っていて、jQueryのサンプルはこんな感じ。解析は主にphilbooth/complexityReport.jsを使ったcomplexityの解析結果で、Platoはそれをグラフに出力してくれる。あとJSHintでの検知結果もついてくる。 complexityReport.jsでは何を出力してくれるかというと、lines of code、number of parameters、cyclomatic complexity、Halstead metrics、maintainability indexなど。サンプルがこんな感じ。 Platoのグラフで注目されるのは、Maintainabilityとい
CSSプロパティの重複を解析してくれるgrunt-csscssについて紹介するよ - Qiita
peterkeating/grunt-csscss 今回紹介するgrunt-csscssはCSSプロパティの重複を見つけてくれるgrunt-pluginである。 csscssってゆうgemがありまして、これをGruntから叩いてるのですね。なので、このプラグインを使いたければ事前にgem install csscssしとかな使えまへんで。 このcsscssがなんのためにあるのかというと、サイトには以下のようなことが書かれている。 What is it for? One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps. ほー、メンテナンス性のためとな。僕は単純にファイルサ
JSコードの品質チェックをしてくれるgrunt-platoについて紹介するよ - Qiita
grunt-platoとは platoというツールから、JavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるGruntプラグインです。 https://npmjs.org/package/grunt-plato https://github.com/jsoverson/grunt-plato platoとは 上でほとんど書きましたが、platoはJavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるNode製のツールです。 https://github.com/es-analysis/plato platoではjQuery, Grunt, marionetteのレポートをサンプルとして公開してくれてるので、まずはこれらを見て、どのようなものなのか知ってください。 http://es-analysis.gith
Webサイト制作に便利なGruntプラグイン（その1） - Qiita
これからGruntを始める同僚の参考になればいいなぁ、と思い書きました。今回は基本のGrunt-contribプラグインにターゲットを絞り、その中で僕がWebサイト制作で特に利用することの多いプラグインを紹介しています。 簡単な設定例も併記しましたが、たいていはそれぞれのプラグインでより多くのオプションが用意されており、また僕自身もそれらの機能を十分把握していない可能性もあるので、実際に使用する際には各々の説明ページを参照してください。 また、grunt-contrib以外で利用しているその他のGruntプラグインは、別記事としていくつか紹介しています。 Gruntにやってもらうと便利な作業 さまざまな用途に利用できますが、Web制作では以下のような機能が便利に使えるのではないでしょうか。 【開発時】 任意のファイルを更新すると、ブラウザを自動で更新（ライブリロード） CSSスプライトの生
僕が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」を実行できる。 昔
CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧
連載目次 前回の記事「ブラックなWeb開発現場の救世主、Gruntのインストールと使い方」では、Gruntについての概要とセットアップ、基本的な動作を確認してみました。 今回は、Gruntで使用できるいろいろな「プラグインモジュール」（以下、プラグイン）をインストールし、実際に動かして動作を確認してみましょう。 Gruntのプラグインとは、何ができるのか 前回の繰り返しになりますが、プラグインを使用すると、Gruntでいろいろなタスクを実行できるようになります。実行できるタスクの内容はプラグインによってさまざまですが、幾つか例を挙げると、下記のような作業が自動化できます。 CoffeeScript／TypeScriptをJavaScriptへコンパイル（変換） SCSS（Sass）／LESSをCSSへコンパイル（変換） ファイルの圧縮／結合／最適化 JSHintでJavaScriptの構文
そのページで使われているCSSだけまとめてくれるgrunt-uncssについて紹介するよ - Qiita
addyosmani/grunt-uncss 今回紹介するgrunt-uncssはそのページに使用されているCSSだけ抽出してくれるgrunt-pluginである。Frontrend x ChromeFrontrend x Chromeのときに講演してくれたAddyさん作である。 使い方 例えば上記のようなMapleのページがあるが、ここで読み込んでいるmaple.cssの全てのスタイルを使っているわけではない。あると便利なHelper系のスタイル_helper.scssも、このページだけで言えば、そんなに使っていない。 # A grunt task for removing unused CSS from your project builds uncss: dist: files: 'app/files/css/tidy.css': ['app/index.html'] ということで、
Getting started - Grunt: The JavaScript Task Runner
Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. Grunt 0.4.x requires stable Node.js versions >= 0.8.0. Before setting up Grunt ensure that your npm is up-to-date by running npm update -g npm (this might require sudo on certain systems). If you already have installed Grunt and are now searching for some quick reference, please checkout our Gruntfile example a
CSS書く人なら絶対入れとけのgrunt-contrib-csslintについて紹介するよ - Qiita
gruntjs/grunt-contrib-csslint 今回紹介するgrunt-contrib-csslintは栄えある安全安心のContribシリーズでありCSS Lintをしてくれるgrunt-pluginである。 JavaScripttを書く人であればJSLintやJSHintを使うのが当たり前かと思うが、HTMLコーダーにとってLintという行為馴染みが薄いかもしれない。ちなみに、LintとはWikipediaに以下のように書かれている。 転じて、C言語に限らず、各種言語で書かれた文書に対して文法チェックを行うプログラムも、lintと呼ばれるようになった。この意味でのlintの代表例としては、HTMLの文法チェックを行うAnother HTML-lintがある。 lint - Wikipedia おお、HTML Lintか！懐かしい！Validatorの名前のほうがコーダーにと
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する | バシャログ。
今年も残り1ヶ月になりました、そろそろ娘へのクリスマスプレゼンの準備をしなくては… ishida です。 さて今回は、grunt-csscomb についてです。 grunt-csscomb は CSSのプロパティをソートしてくれるプラグインです。 コードを記述する際に並び順を意識することなくコーディングを進められるのでとても便利です。 しかしデフォルトのまま使用すると以下のような感じになります。 無駄な改行や { 前での折り返しなど気になる点が多々あります。 このコードを整形するには、configファイルで設定します。 Gruntのcsscombオプションでjsonファイルを指定 まず、Gruntfile.js にて csscombオプションでjsonのファイルを以下のように指定します。 grunt.initConfig({ csscomb: { options: { config: 'c
TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツール 「TinyPNG」 が JPEG ファイルの最適化にも対応しました。 これにあわせて、「TinyJPG」 も立ち上がりましたが、TinyPNG も TinyJPG も、どちらも PNG / JPEG ファイルの最適化を同時に行えるようになっていますので、サイト名が異なるだけで機能的には同じです。 上が元々ある TinyPNG で、下が TinyJPG のスクリーンショット。 使い方は同じで、パンダさんの横の ドラッグ & ドロップ エリアに、最適化したい画像をドラッグ & ドロップすればいいだけ （もしくはこの部分をクリックしてファイルを選択）。同時に 20 ファイルまで最適化できます。 今までの TinyPNG は PNG ファイル専用で、JPEG ファイルをアップロードすると当然ながらエラーになりましたが、今は JP
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://kudox.jp/server/grunt-js
GitHub - gruntjs/grunt-contrib: [DEPRECATED] A collection of common grunt tasks.![GitHub - gruntjs/grunt-contrib: [DEPRECATED] A collection of common grunt tasks.](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ae06bf9cd5099f723531e65ad920dece03c4385/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fe556910727914fc88880f52cdb7dd3f66785ceff9e652b4d0340b7a3c4f3453e%2Fgruntjs%2Fgrunt-contrib)
