yeomanでフロントエンド開発を

効率化する方法

Toru Hosokawa

twitter:@anton0825
facebook:toru.hosokawa1
github:hosokawa0825
blog:http://d.hatena.ne.jp/anton0825/

2012.11.2

Webアプリ開発時の問題

  • 新しいソリューションがどんどん出てくる。最新の情報を追いかけるのが大変
  • ビルドプロセスが複雑

yeomanを使って解決！

  • フロントエンド開発の
    ベストプラクティスを集めたツール
機能 ライブラリ
パッケージマネージャbower.js
scaffold生成独自
ビルドgrunt.js
webサーバgrunt.js
テスト実行grunt.js, mocha, PhantomJS
coffeescriptのコンパイルcoffee.js
sass,scssのコンパイルcompass
機能 ライブラリ
css,jsの結合・圧縮uglify.js
ファイルの更新監視grunt.js, liveReload
jsのlintjsHint
html,css内のjs,css,imgへのリンクを圧縮後のファイルへのリンクに置き換えるgrunt.js
htmlの圧縮Html-minifier
jpg,png画像の圧縮OptiPNG/JPEGtran

デモ

  • インストール
    curl -L get.yeoman.io | bash
  • scaffold生成
    yeoman init
  • Webサーバ起動
    yeoman server
  • テスト実行
    yeoman test

デモ

  • ビルド
    yeoman build
    yeoman build:minify
  • パッケージ管理
    yeoman install jquery
  • パッケージ更新
    yeoman update

デモ

  • gruntタスクの追加
    例：autotest機能の追加
    Gruntfile.jsにこれを追加するだけ！ 
    
  test: {
    files: [
      'test/**/*.html'
    ],
    tasks: 'test reload'
  },

イマイチなところ

ツール情報共有サイト