Bower + Grunt + Yeomanでつくるフロントエンド・ワークフロー

Bower + Grunt + Yeomanでつくるフロントエンド・ワークフロー

参考:
Bower入門(基礎編) - from scratch
Bower入門(応用編) - from scratch
[Grunt]Yeomanで開発ワークフローを楽にしよう[bower] ｜ Developers.IO
Yeoman を触ってみる - albatrosary's blog

現状の問題

• 開発環境
  • LiveReloadによるLESSコンパイルはしているが、bootstrap等のライブラリの管理は手動で行っている
  • 依存性の管理は、Rails側のAssets Compileで行っている(application.js)
• 本番環境
  • 同上

解決手段

Bower

npm install -g  bower

Rubyでいうgem。

bower install <libname>

--save オプションを付けると、bower.jsonに依存関係が記述されるので、基本的に付ける

bower install bootstrap --save

Grunt

npm install -g grunt

"JavaScript Task Runner"を名乗っている。SassやLESS、CoffeeScript、Haml等プリプロセッサのコンパイルが可能

grunt

コマンドで、Gruntfile.jsに指示されたタスクを実行できる。

grunt-bower-task

Gruntを補助するレイアウトツール。

npm install grunt-bower-task --save-dev

Bower入門(応用編) - from scratchを参考に、Gruntfile.jsに追記する。

module.exports = function (grunt) { //の中に↓を入れる

   bower: {                                                                      
      install: {
        options: {
          targetDir: './app/assets/bower', //ライブラリの配置先のディレクトリ
          layout: 'byType', // レイアウト、説明は後述します
          install: true, //grunt実行時にbower installを実行するかどうか
          verbose: false, // ログの詳細を出すかどうか
          cleanTargetDir: true, // targetDirを削除するかどうか
          cleanBowerDir: false // bowerのcomponentsディレクトリを削除するかどうか
        }
      }     
    }     

grunt.loadNpmTasks('grunt-bower-task');
grunt.registerTask('default', ['bower:install']);

Yeoman

BowerとGruntを使って、テンプレートを作成するツール

npm install -g yo

以下の手順で使う

最も一般的な、generator-webappをnpmで追加

これ以外もたくさんのgeneratorテンプレートが、npm searchで見つけられる

npm install -g generator-webapp 

generator-webappに設定されたファイル群が、bowerとgruntを使ってインストールされる

yo generator-webapp