当前位置: 58彩票app下载 > 计算机网络 > 正文

调试和部署

时间:2019-11-02 22:49来源:计算机网络
1. 简介 本文介绍Ubuntu14.04下Node.js npm + bower的安装、调试和部署。 参考文档 另外: Windowsnodejs版本 Windows下ide可选用WebStorm-10.0.2.exe 2.  安装 2.1.  nodejs/npm安装 注意: 不要使用ubuntu自带的

1. 简介

本文介绍Ubuntu14.04下Node.js

  • npm + bower的安装、调试和部署。

参考文档

另外:

Windows nodejs版本

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

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

图片 1

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查看包

     图片 2

各种包已经安装完成

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) 安装完成

     图片 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 

 

4.  部署

1) Grunt build

          ubuntu@ip-172-31-28-0:~/FundTray/frondent$ grunt build

图片 5

图片 6

2) cdn自动替换

ubuntu@ip-172-31-28-0:~/FundTray/frondent$ grunt cdnify:dist

图片 7

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目录就是发布目录,最终的网站

     图片 8

5) 拷贝dist到web服务器

搭建一个web服务器(比如nginx),将dist下的所有文件拷过去即可实现访问

下面关于Node.js的内容你可能也喜欢

在 Ubuntu 14.04/15.04 上安装配置 Node.js v4.0.0  http://www.linuxidc.com/Linux/2015-10/123951.htm

如何在CentOS 7安装Node.js http://www.linuxidc.com/Linux/2015-02/113554.htm

Ubuntu 14.04下搭建Node.js开发环境  http://www.linuxidc.com/Linux/2014-12/110983.htm

Ubunru 12.04 下Node.js开发环境的安装配置 http://www.linuxidc.com/Linux/2014-05/101418.htm

Node.Js入门[PDF+相关代码] http://www.linuxidc.com/Linux/2013-06/85462.htm

Node.js开发指南 高清PDF中文版 +源码 http://www.linuxidc.com/Linux/2014-09/106494.htm

Node.js入门开发指南中文版 http://www.linuxidc.com/Linux/2012-11/73363.htm

Ubuntu 编译安装Node.js http://www.linuxidc.com/Linux/2013-10/91321.htm

Node.js 的详细介绍:请点这里
Node.js 的下载地址:请点这里

更多Ubuntu相关信息见Ubuntu 专题页面 http://www.linuxidc.com/topicnews.aspx?tid=2

本文永久更新链接地址:http://www.linuxidc.com/Linux/2016-04/130093.htm

图片 9

编辑:计算机网络 本文来源:调试和部署

关键词: