GruntFrontOsaka 勉強会

2014/04/26

Sass+Compass+Gruntで快適コーディング

@sigesaba さん

06/28 に産業創造館でPHP関西2014があるよー

Task Runner

1. GruntのTask

   1. Less/Sassのコンパイル
   2. ブラウザの自動リロード
   3. Javascript のコンパイル

自動化＝JavascriptでできるTask

How do i Install?

黒い画面でインストールするので、難しい人は難しいかも

1. Node.js
2. Grunt-cli
3. 2 つの設定ファイル
   2. package.json
   1. Grunt の依存を解消
   1. grunt のプラグイン
   2. プラグインは公式から。
   3. http://gruntjs.com/plugins
   1. GruntFile.js
      3. 実行するタスクを書く
      2. 自分でかけるけど、基本ひな形からコピペっぽい

Sass + Compass + Grunt

1. Grunt で web server を動かす
2. sass ファイルが更新されたら自動コンパイル

Plugin

1. Honebuto

2. Grunt Sass

3. Grunt Compass

4. 公式のプラグインは grunt-contrib-*** がつく

後でGuthubに上げる

走らせるのは、Gruntコマンドで一発。

まとめ

• Grunt で自動化しよう。楽できる。
• わからん所があれば知ってる人に聞いてみるのが近道

Grunt のあんなこといいな、できたらいいな

@astronaughts さん

Chatwork でモバイルの開発やってます

Grunt っていろいろできる

Plugin: 2,711 (2014/04/25)

どんなことができるのか紹介しますー

スライド: https://speakerdeck.com/astronaughts/grunt-falseannakotoiinadekitaraiina

ファイルの更新plugin

ファイルをずーっと監視してて、更新があればタスクを実行。いちいちgruntコマンドの実行は面倒なので、必須です。

• Grund-contrib-watch
  公式。ドキュメントはある

• Grund-este-watch
  速い

動くな、まだ変化が見られない

• grunt-newer

  ファイル更新があって、変更があったかどうか見ている

並んで

• Grunt-Concallent

  テンプレート作成・ドキュメント生成・テスト実行とかとか

それここに置きます

• Grunt-contrib-copy
• Grunt-contrib-clean

コンパクトにして

• Grunt-contrib-cssmin
• Grunt-contrib-htmlmin

css/html を minifyする

サイズを抑える

• Grunt-contrib-imagemin

png/jpeg を圧縮

テスト

• grunt-...
• Grunt-mocha-test

Testing Framework を実行させる

リクエストしていい？

• Grunt-http

Grunt が http を投げて、取ってきたコンテンツを保存する

サーバにデプロォォイ

• grunt-{rsync,ftp-deploy,sftp-deploy,s3}

あ、その環境変数じゃないです

• Grunt-env

タスクごとに環境変数を変えたい時に。ネタ切れ…？

パッケージのアップデート忘れてた

• Grunt-bump

これ使うとpackage.jsonを上げてくれます

っしゃ、みやざ（ｒｙ

• Grunt-aoimiyazaki

タスク完了時に、みやざ（ｒｙが歌います。

僕が作ったやつ

• Grunt-chatwork
  タスク完了した時にchatworkに投げる
• Grunt-tishadow
  マイナーだけど、Githubでスターもらった
• Grunt-play
  タスク完了した時に音声ファイルを実行させる

Gruntの罪と罰

@kamyam さん

普段はJS。node.jsとか。

What is Grunt

Task Runner = 作業時間の短縮

設定ファイルがめんどい

• Cake を使いながら ViewをWatchとか…

テンプレート化されたフォルダー構成などで使うと効果を発揮する

• 会社のテンプレートエンジン
• Framework とか
• Yeaman

使うときは、プロジェクト初期から使うのがいいかも

便利な所

• grunt-exec
• grunt-shell

Grunt の実行で　DB も起動している

ライブリロードは、JSかCSSか、どっちかだけがリロードされる

アレな所

• 500行のGruntfile.jsはどうよ。
• 設定が…
• 更新が頻繁なので、ロードマップを見るのがいい

Grunt vs gulp

Gruntが遅いのでできたプロジェクト

Middleman

ライブリロードはこっちのほうがはやい…

コストと導入のバランスが大事よ。

LT: WebStorm+GruntなゆるJS使いから見たTypeScriptとCoffeeScriptの使いどころ

@tanakahisateru さん

スライド: http://www.slideshare.net/tanakahisateru/grunt-frontosaka1lttanaka

30人枠に50人だったので、喋れば出れるということででた。

CoffeeScript

構文がIndent構造

GruntファイルをCoffeeScriptで書くためだけに使ってる

TypeScript

TSDなんとか。npmでインストールできる。

LT: Task Sample

@atuyl さん

grunt-htmlmagickの紹介: https://github.com/AtuyL/grunt-htmlmagick

気力尽き果てた…