Posted at

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

More than 5 years have passed since last update.


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