【JavaScript】bower 自動化部署 (github安裝)

- bower官方說明：

ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.

- 實作後：

bower.json定義的ignore的屬性，只能排除自己的package，不包含相依的套件

利用bower.json定義需要安裝的相依套件，取出需要的檔案放至自己的目錄結構，當然還要過濾掉不要的檔案。

分成兩個部分，來完成這個目標：
1. 在github上建一個bower.json，安裝bower套件後，再利用postinstall複製到預想的目錄結構
2. 從bower install 自建的github專案，在此專案的bower.json中的ignore就有作用，可刪除不要的檔案與目錄，只留下預想的目錄結構

下面實作lab

---

Bower custom github install

bower install <github>

---

ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.」

---

Description: Because ignore attribute only apply project file, not it’s dependencies project.

copy the latest version to custom structure directory using postinstall at git project
then bower install from git && ignore unwanted file

• github collect bower repository
  • generate bower.json
  • diff dependencies && devDependencies
  • postinstall script
• bower install from custom bower repository
  • install directory && postinstall setup
  • ignore unwanted file
  • install from custom repository
  • finally file structure

Collect Bower

Bower Init

generate bower.json

Command:

bower init

---

Example:
#]bower init
bower existing The existing bower.json file will be used and filled in
? name components
? description test bower install
? main file static/components/angular/angular.js
? keywords bower static file install
? authors yourName yourName@yourDomain
? license MIT
? homepage
? set currently installed components as dependencies? No
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'components',
  authors: [
    'yourName <yourName@yourDomain>'
  ],
  description: 'test bower install',
  main: 'static/components/angular/angular.js',
  license: 'MIT',
  homepage: '',
  directory: 'static/components/',
  ignore: [
    'LICENSE.md',
    'package.json',
    'test',
    'tests',
    '**/.*',
    'node_modules',
    'bower_components'
  ],
  dependencies: {
    angular: 'angular2#^1.5.6'
  },                                                                                                                                                                                                                                         
  keywords: [                                                                                                                                                                                                                                
    'bower',                                                                                                                                                                                                                                 
    'static',                                                                                                                                                                                                                                
    'file',                                                                                                                                                                                                                                  
    'install'                                                                                                                                                                                                                                
  ]                                                                                                                                                                                                                                          
}

---

Bower Dependencies

diff dependencies && devDependencies

install && save to production’s dependencies at bower.json Command:

bower install bootstrap --save

install && save to production’s devDependencies at bower.json Command:

bower install bootstrap --save-dev

Script Postinstall

postinstall script

STEP1:

create .bowerrc file

Code:

{
  "scripts": {
      "postinstall": "./.bower-postinstall.sh"
  }
}

STEP2:

create postinstall scripts
copy dependencies file to your custom directory ['css', 'js', 'fonts']

Code:

for dir in js fonts css; do
    if [ ! -d $dir ]; then
        mkdir $dir
    fi
done
#minimal=".min"
minimal=""

cp -af bower_components/angular/angular${minimal}.js js/angular${minimal}.js
cp -af bower_components/bootstrap/dist/js/bootstrap${minimal}.js js/bootstrap${minimal}.js
cp -af bower_components/bootstrap/dist/fonts/* fonts/
cp -af bower_components/bootstrap/dist/css/bootstrap-theme${minimal}.css css/bootstrap-theme${minimal}.css
cp -af bower_components/bootstrap/dist/css/bootstrap${minimal}.css css/bootstrap${minimal}.css
cp -af bower_components/jquery/dist/jquery${minimal}.js js/jquery${minimal}.js
cp -af bower_components/angular-google-maps/dist/angular-google-maps${minimal}.js js/angular-google-maps${minimal}.js
cp -af bower_components/lodash/dist/lodash${minimal}.js js/lodash${minimal}.js
cp -af bower_components/angular-simple-logger/dist/angular-simple-logger${minimal}.js js/angular-simple-logger${minimal}.js

STEP3:

run bower install

Command:

bower install

Bower Install

bower install from custom bower repository

Bowerrc

install directory && postinstall setup

STEP1:

create .bowerrc file

Code:

{
  "directory": "static",
  "scripts": {
      "postinstall": "./.bower-postinstall.sh"
  }
}

STEP2:

create postinstall scripts

Code:

rm -rf static/components/.bower.json
rm -rf static/components/bower.json

Bower Ignore

ignore unwanted file

Description:

Edit bower.json

Code:

{
  ...
  "ignore": [
    "**/.*",
    ".*",
    "README.md",
    "bower_components"
  ],
  ...
}

Bower Custom Git Install

install from custom repository

Description:

bower will install to your path <directory>/<bower-project-name>
<dirctory> default is bower_components, it can be override by .bowerrc file

Command:

bower install git@<githubFQDN>:yourName/bower-lab.git

Bower File Result

finally file structure

Result:

#] ls static/components/
total 0
drwxr-xr-x 1 yourAccount yourGroup  20 Jun 13 13:45 .
drwxr-xr-x 1 yourAccount yourGroup  54 Jun 13 13:45 ..
drwxr-xr-x 1 yourAccount yourGroup  64 Jun 13 13:45 css
drwxr-xr-x 1 yourAccount yourGroup 326 Jun 13 13:45 fonts
drwxr-xr-x 1 yourAccount yourGroup 172 Jun 13 13:45 js