【Gulp.jsインストール】フロントエンドタスクランナーGulp.jsの使い方 | ホームページ制作│大阪│株式会社ユニオンネット

2014/12/16 43 users Grunt Compass Gruntfile.js ナウ

こんにちわ。山王です。 最近話題になってるフロントエンドタスクランナーGulp.jsをインストールしたお話です。 以前Grunt.jsを使用した際はCompassのコンパイルが遅くて断念したんですが やはりナウでヤングでモダンなやり方でやりたいなぁと思いGulp.jsの噂を聞きつけインストールした次第です。 Gruntとの違い Gruntfile.jsに比べgulpfile.jsの方が書きやすい ... 続きを読む

Node.js - 僕がGrunt.jsで使っているPlugin一覧 - Qiita

2014/08/31 92 users Qiita node.js

どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可能 デフォルトでpublic-readになるので、Web... 続きを読む

Introducing Pint, the new build system for Grunt.js

2014/02/20 78 users

Introducing Pint, the new build system for Grunt.js Organize your build into small, testable pieces with Pint, a new dependancy-aware wrapper for Grunt.js. This interview with Pint creator Eric Baer d... 続きを読む

Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開 | Another Sky

2014/02/17 55 users CSS another sky 整形 CSSプリプロセッサ

一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行い... 続きを読む

Gruntで始めるWeb制作の自動化 - to-R

2013/08/27 268 users Sass JSHint Grunt CSSプリプロセッサー

Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインスト... 続きを読む

PhpStormとGrunt.jsで作るCakePHP快適開発環境

2013/07/18 30 users PhpStorm エンジニア http WEBサービス

PhpStormとGrunt.jsで作るCakePHP快適開発環境 Presentation Transcript PhpStormとGrunt.jsで作る CakePHP快適開発環境 第7回関西PHP勉強会 2013.7.17               自己紹介 • かみやん (Twitter@kamiyam) • エンジニア • Webサービスつくってます http://nantokawor... 続きを読む

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17

2013/03/14 478 users gzip ビルドツール minify 備忘録 CSS

Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 さらにメタ言語などを使用すると、複数のツールを使用しなければならないケースも出てきます。 それらの作業をまとめて自動化してしまう、Grunt.jsが面白かったので備忘録もかねて紹介します。 Grunt.jsとは？ Grunt.jsは、サーバーサ... 続きを読む

Gruntをつかってみたー | SAITEI no CHINJUU!!!（最低の珍獣）

2013/02/27 31 users Grunt Rake Sass CSSプリプロセッサー 珍獣

すでに花粉症が始まった大熊猫です（@@） さて、今回はビルド管理ツール「Grunt.js」のご紹介と実際に使ってみるまでを簡単にまとめてみました。 Gruntとは？ GruntはJavaScriptで作られたビルド管理ツールです。 SASSなどのCSSプリプロセッサーの管理やCSSやJavaScriptの結合や圧縮などの処理をタスクとして実行できます。 ビルド管理ツールは他にRuby(Rake)や... 続きを読む

コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog

2012/12/14 699 users PowerPoint styleDocco モジュール モロ

プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時... 続きを読む