Instantly share code, notes, and snippets.
Save t32k/7669928 to your computer and use it in GitHub Desktop.
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面(ターミナル)を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt(JavaScript製のタスクランナー)を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。
Grunt: The JavaScript Task Runner
GUI Apps
- CodeKit — THE Mac App For Web Developers
- Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.
- Prepros :: Compile Sass, less or any preprocessing language
Web Performance
- High Performance Web Sites
- Twitter / Search - #perfmatters
- HTTPリクエストを減らすために【終章】我々には1000msの猶予しか残されていない — MOL
Books
- O'Reilly Japan - ハイパフォーマンスWebサイト
- High Performance Browser Networking
- O'Reilly Japan - ハイパフォーマンスJavaScript
$ npm install grunt-cli -g
$ npm init
$ npm install grunt --save-dev$ npm install grunt-csso --save-dev
$ npm install grunt-init -g$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git~/.grunt-init/gruntfile$ grunt-init gruntfile// Load the task:grunt.loadNpmTasks('grunt-csso');
// Configure the task:grunt.initConfig({csso:{dist:{files:{'output.css':['input.css']}}}});
// Register the task:grunt.registerTask('default',['csso']);
$ npm install grunt-init -g$ git clone https://github.com/gruntjs/grunt-init-gruntplugin.git~/.grunt-init/gruntplugin$ grunt-init gruntplugin- CSScomb — MOL
- CSSOとGRUNT-CSSO — MOL
- 部屋とYシャツと私 — MOL
- HTTPリクエストを減らすために【CSS Sprite編】スプライト地獄からの解放 — MOL
- HTTPリクエストを減らすために【WebFont編】ドラッグ&ドロップ — MOL
- grunt-initとYeoman — MOL
$ npm install yo -g$ npm install generator-maple -g$ mkdir your_proj&&cd$_$ yo maple$ grunt
Node.js : サーバーサイドJavaScript
NPM : Node Package Module、パッケージ管理ツール(プラグイン管理的な)
Git : 分散型バージョン管理システム(ソースコード管理に使われるもの)
Grunt : JavaScript製のタスクランナー(面倒なタスクを実行してくれるもの)
Yeamon : Web開発のためのイケてるワークフロー
リント : 文法チェック的な
スキャフォールディング : 足場作り、プロジェクトに必要なファイル一式を生成すること
コンパイル : コードを機械語に変換すること(ここではコンバート的な意味合い)
ビルド : コンパイルなどを行い、最終的な実行可能なソフトウェアにすること
デプロイ : ソフトウェア(Webサービスなど)を利用可能な状態にすること
cd : Change Directory、現在のディレクトリを移動するコマンド
mkdir : MaKe DIRectory、ディレクトリを作成するコマンド
#html5j
アンケートにご協力ください!あなたのフィードバックが、html5jの活動を支えています!

![[DEMO] yo maple](/image.pl?url=http%3a%2f%2fimg.youtube.com%2fvi%2fU26K5NXvRxc%2f0.jpg&f=jpg&w=240)