1. 簡介
本文介紹ubuntu14.04下nodejs+npm+bower的安裝、調試和部署
參考文檔
https://docs.npmjs.com/getting-started
https://github.com/npm/npm/issues/
另外:
Windows nodejs版本https://nodejs.org/download/release/latest/node-v5.5.0-x64.msi
Windows下ide可選用WebStorm-10.0.2.exe
2. 安裝
2.1. nodejs/npm安裝
注意：
-
- 不要使用ubuntu自帶的nodejs版本，實在是太低了!；最新版本(截止本文)爲5.5.0
- Npm自帶，不需要額外安裝
1) 下載
可以去nodejs官網選擇相應的版本複製下載鏈接
ubuntu@ip-172-31-28-0:~$wget 下載鏈接
2) 解壓縮
ubuntu@ip-172-31-28-0:~$tar zxvf node-v5.5.0.tar.gz
3) 安裝編譯工具
ubuntu@ip-172-31-28-0:~$sudo apt-get install g++ make
4) 安裝
ubuntu@ip-172-31-28-0:~$cd node-v5.5.0
ubuntu@ip-172-31-28-0:~$./configure
ubuntu@ip-172-31-28-0:~$Make
ubuntu@ip-172-31-28-0:~$Make install
5) nodejs版本查看
ubuntu@ip-172-31-28-0:~$ node -v
v5.5.0
6) npm版本查看
ubuntu@ip-172-31-28-0:~$ npm -v
3.3.12
2.2. npm安裝package
1) 進入angularjs項目所在地
ubuntu@ip-172-31-28-0:~$ cd FundTray/frondent/
ubuntu@ip-172-31-28-0:~/FundTray/frondent$
2) 編輯package.json
{
"name": "mmm",
"private": true,
"devDependencies": {
"autoprefixer-core": "^5.2.1",
"grunt": "^0.4.5",
"grunt-angular-templates": "^0.5.7",
"grunt-concurrent": "^1.0.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-cssmin": "^0.12.0",
"grunt-contrib-htmlmin": "^0.4.0",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-jshint": "^0.11.0",
"grunt-contrib-uglify": "^0.7.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^2.1.2",
"grunt-google-cdn": "^0.4.3",
"grunt-jscs": "^1.8.0",
"grunt-newer": "^1.1.0",
"grunt-ng-annotate": "^0.9.2",
"grunt-postcss": "^0.5.5",
"grunt-svgmin": "^2.0.0",
"grunt-usemin": "^3.0.0",
"grunt-wiredep": "^2.0.0",
"jit-grunt": "^0.9.1",
"time-grunt": "^1.0.0",
"jshint-stylish": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
}
3) Npm安裝
ubuntu@ip-172-31-28-0:~/FundTray/frondent$ npm install
安裝完成以後，會顯示各種依賴包關係，出錯請google
4) 進入node_modules，查看安裝後的package
2.3. bower安裝Package
1) 進入angularjs項目所在地
ubuntu@ip-172-31-28-0:~$ cd FundTray/frondent/
ubuntu@ip-172-31-28-0:~/FundTray/frondent$
2) 編輯bower.json
{
"name": "mmm",
"version": "0.0.0",
"private":true,
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "^3.2.0",
"angular-resource": "^1.4.0",
"angular-ui-router": "~0.2.15",
"angular-messages": "~1.4.8",
"font-awesome": "~4.5.0"
},
"devDependencies": {
"angular-mocks": "^1.4.0"
},
"appPath": "app",
"moduleName": "mmmApp",
"overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css"
]
},
"font-awesome": {
"main": [
"css/font-awesome.css",
"fonts/*"
]
}
}
}
3) 創建bower_components
ubuntu@ip-172-31-28-0:~/FundTray/frondent$ sudo mkdir bower_components
4) 安裝bower
ubuntu@ip-172-31-28-0:~/FundTray/frondent$ sudo npm install -g bower
5) bower不能使用sudo，要保證當前用戶擁有當前目錄的權限
ubuntu@ip-172-31-28-0:~/FundTray/frondent$sudo chown -R ubuntu:ubuntu ../frondent/
6) bower 安裝angular等依賴包
ubuntu@ip-172-31-28-0:~/FundTray/frondent$bower install
7) 進入bower_components查看包
各種包已經安裝完成
3. 調試
1) 進入angularjs項目所在地
ubuntu@ip-172-31-28-0:~$ cd FundTray/frondent/
ubuntu@ip-172-31-28-0:~/FundTray/frondent$
2) 安裝grunt客戶端
ubuntu@ip-172-31-28-0:~/FundTray/frondent$npm install –g grunt-cli
3) 安裝完成
4) 查看grunt 客戶端版本
ubuntu@ip-172-31-28-0:~/FundTray/frondent$ grunt -V
grunt-cli v0.1.13
grunt v0.4.5
5) 進入系統所在目錄，運行grunt server啓動調試
注意：目前只可進行本機調試，無法對外訪問
4. 部署
1) Grunt build
ubuntu@ip-172-31-28-0:~/FundTray/frondent$ grunt build
2) cdn自動替換
ubuntu@ip-172-31-28-0:~/FundTray/frondent$ grunt cdnify:dist
3) cdn手動替換
有部分cdn是無法自動替換的，此時只能手動替換了
替換
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
爲
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
替換
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
爲
<linkhref="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
4) 查看dist
Dist目錄就是發佈目錄，最終的網站
5) 拷貝dist到web服務器
搭建一個web服務器(比如nginx)，將dist下的所有文件拷過去即可實現訪問
