Help us understand the problem. What is going on with this article?

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
mekkoo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした