Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 Conference 2013:今どきのGruntを使ったフロントエンド開発(HTML/CSS編)

Slide

SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面(ターミナル)を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt(JavaScript製のタスクランナー)を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。


@t32k

Why use Grunt?

Grunt: The JavaScript Task Runner

GUI Apps

Web Performance

Books

How to use Grunt

node.js

$ npm install grunt-cli -g

Package.json

$ npm init
$ npm install grunt --save-dev
$ npm install grunt-csso --save-dev

Gruntfile

$ 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']);

Customize your Gruntfile!

$ npm install grunt-init -g
$ git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
$ grunt-init gruntplugin

t32k/maple

Jet Start

$ npm install yo -g
$ npm install generator-maple -g
$ mkdir your_proj && cd $_
$ yo maple
$ grunt

[DEMO] yo maple
yo maple demo - YouTube.

用語集

Node.js : サーバーサイドJavaScript
NPM : Node Package Module、パッケージ管理ツール(プラグイン管理的な)
Git : 分散型バージョン管理システム(ソースコード管理に使われるもの)
Grunt : JavaScript製のタスクランナー(面倒なタスクを実行してくれるもの)
Yeamon : Web開発のためのイケてるワークフロー
リント : 文法チェック的な
スキャフォールディング : 足場作り、プロジェクトに必要なファイル一式を生成すること
コンパイル : コードを機械語に変換すること(ここではコンバート的な意味合い)
ビルド : コンパイルなどを行い、最終的な実行可能なソフトウェアにすること
デプロイ : ソフトウェア(Webサービスなど)を利用可能な状態にすること
cd : Change Directory、現在のディレクトリを移動するコマンド
mkdir : MaKe DIRectory、ディレクトリを作成するコマンド


#html5j

アンケートにご協力ください!あなたのフィードバックが、html5jの活動を支えています!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.