2014/04/26
Sass+Compass+Gruntで快適コーディング
@sigesaba さん
06/28 に産業創造館でPHP関西2014があるよー
Task Runner
-
GruntのTask
- Less/Sassのコンパイル
- ブラウザの自動リロード
- Javascript のコンパイル
自動化＝JavascriptでできるTask
How do i Install?
黒い画面でインストールするので、難しい人は難しいかも
- Node.js
- Grunt-cli
- 2 つの設定ファイル
- package.json
- Grunt の依存を解消
- grunt のプラグイン
- プラグインは公式から。
- http://gruntjs.com/plugins
- GruntFile.js
- 実行するタスクを書く
- 自分でかけるけど、基本ひな形からコピペっぽい
- package.json
Sass + Compass + Grunt
- Grunt で web server を動かす
- sass ファイルが更新されたら自動コンパイル
Plugin
- Honebuto
- Grunt Sass
Grunt Compass
公式のプラグインは grunt-contrib-*** がつく
後でGuthubに上げる
走らせるのは、Gruntコマンドで一発。
まとめ
- Grunt で自動化しよう。楽できる。
- わからん所があれば知ってる人に聞いてみるのが近道
Grunt のあんなこといいな、できたらいいな
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の使いどころ
スライド: 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
気力尽き果てた…