Edited at

GruntFrontOsaka 勉強会

More than 5 years have passed since last update.

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 つの設定ファイル


    1. package.json


      1. Grunt の依存を解消

      2. grunt のプラグイン

      3. プラグインは公式から。

      4. http://gruntjs.com/plugins



    2. GruntFile.js


      1. 実行するタスクを書く

      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を上げてくれます


っしゃ、みやざ(ry


  • Grunt-aoimiyazaki

タスク完了時に、みやざ(ryが歌います。


僕が作ったやつ


  • 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

http://gulpjs.com

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

気力尽き果てた…