How to move bower dependencies into place

Question

I have a HTML-based project and I am using a bower.json to get all the dependencies together:

{
  "name": "MyProject",
  "version": "0.1",
  "main": "index.html",
  "dependencies": {
    "modernizr": "2.8.3",
    "classie": "1.0.1",
    "jquery": "2.1.1",
    "font-awesome": "4.2"
  }
}

The whole thing is in git and I don't want to checkin the bower_components directory. So I want to move the libraries into my project using some sort of script mechanism.

The situation:

• I want to have the following directory structure:

  • index.html
  • css
    • main.css
  • js
    • main.js
  • lib
    • js
      • jquery
        • jquery.min.js
    • css
      • jquery-ui
        • jquery-ui.min.css
    • fonts
      • ...

• Some libs not only have .js files but also css as well as font files

• Some libraries (eg font awesome) reference files within the library structure

Update

I cam up with a rake script based approach (See below ). But I wonder, if there is a more elegant approach based on Javascript / NodeJS

Answer 1

.gitignore文件会更容易吗？

Answer 2

I think its okay if you use git ignore to avoid bower_components and node_modules. but what you need there is .bowerrc file with this:

{
    "directory": "app/libs"
} 

with that route you can specified the destination folder.

and your bower.json

{
  "name" : "test",
  "version": "0.1",
  "dependencies" : {
    "jquery-ui" : "latest"
  },
  "install" : {
    "path" : {
      "css": "src/css",
      "js": "src/js"
    },
    "sources" : {
      "jquery-ui" : [
        "components/jquery-ui/ui/jquery-ui.custom.js",
        "components/jquery-ui/themes/start/jquery-ui.css"
      ]
    }
  }
}

or it can be possible as well using a task runner like grunt or gulp

Answer 3

I came up with the following solution, which is based on a Rake script:

desc 'Copy the bower libs to the projects sources'
task :copy_libs do

  js_lib = 'js/lib'
  `rm -fr #{js_lib}`
  `mkdir -p #{js_lib}`

  libraries = {
    js: [
      'jquery/dist/jquery.min.js',
      'jquery/dist/jquery.min.map',
      'modernizr/modernizr.js',
      'classie/classie.js'
    ],
    css: [
      'font-awesome/css/font-awesome.min.css'
    ],
    fonts: [
      'font-awesome/fonts/fontawesome-webfont.woff',
      'font-awesome/fonts/fontawesome-webfont.ttf',
      'font-awesome/fonts/fontawesome-webfont.svg',
    ]
  }


  bower = 'bower_components'

  libraries.each do |type,libs|
    `mkdir -p lib/#{type}`
    libs.each do |lib|
      `cp #{bower}/#{lib} lib/#{type}/`
    end    
  end
end