ubuntu14.04下nodejs + npm + bower的安裝、調試和部署

　　

 

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)   下載

　　　　ubuntu@ip-172-31-28-0:~$wget https://nodejs.org/download/release/latest/node-v5.5.0.tar.gz

　　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下的全部文件拷過去便可實現訪問