Installation, commissioning and deployment of Nodejs + NPM + Bower under ubuntu14.04

　　

1. Introduction

This article describes the installation, commissioning, and deployment of Nodejs+npm+bower under ubuntu14.04

Reference documents

https://docs.npmjs.com/getting-started

https://github.com/npm/npm/issues/

Other than that:

Windows Nodejs version Https://nodejs.org/download/release/latest/node-v5.5.0-x64.msi

The IDE under Windows can choose Webstorm-10.0.2.exe

2. Install 2.1. NODEJS/NPM Installation

Attention:

• • Do not use Ubuntu comes with the Nodejs version, is too low!; the latest version (as of this article) is 5.5.0
  • NPM comes with no additional installation required

1) Download

[Email protected]:~ $wget https://nodejs.org/download/release/latest/node-v5.5.0.tar.gz

2) Unzip

[Email protected]:~ $tar ZXVF node-v5.5.0.tar.gz

3) Install the Build tool

[Email protected]:~ $sudo apt-get Install g++ make

4) Installation

[Email protected]:~ $cd node-v5.5.0

[Email Protected]:~$./configure

[Email protected]:~ $Make

[Email protected]:~ $Make Install

5) Nodejs version view

[Email protected]:~$ node-v

v5.5.0

6) NPM version view

[Email protected]:~$ npm-v

3.3.12

2.2. NPM installation Package

1) access to ANGULARJS project location

[Email protected]:~$ cd fundtray/frondent/

[Email protected]:~/fundtray/frondent$

2) Edit 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 Installation

[Email protected]:~/fundtray/frondent$ npm Install

After the installation is complete, a variety of dependent package relationships are displayed, and errors can be made by Google

4) Enter Node_modules to view the package after installation

　　　　

2.3. Bower installation Package

1) access to ANGULARJS project location

[Email protected]:~$ cd fundtray/frondent/

[Email protected]:~/fundtray/frondent$

2) Edit 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) Create bower_components

[Email protected]:~/fundtray/frondent$ sudo mkdir bower_components

4) Install Bower

[Email protected]:~/fundtray/frondent$ sudo npm install-g Bower

5) Bower cannot use sudo to ensure that the current user has permission to the current directory

[Email Protected]:~/fundtray/frondent$sudo chown-r Ubuntu:ubuntu. /frondent/

6) Bower install angular and other dependent packages

[Email protected]:~/fundtray/frondent$bower Install

7) Enter bower_components View Package

Various packages have been installed to complete

3. Commissioning

1) access to ANGULARJS project location

[Email protected]:~$ cd fundtray/frondent/

[Email protected]:~/fundtray/frondent$

2) Install Grunt Client

[Email protected]:~/fundtray/frondent$npm install–g GRUNT-CLI

3) Installation Complete

4) View Grunt client version

[Email protected]:~/fundtray/frondent$ grunt-v

GRUNT-CLI v0.1.13

Grunt v0.4.5

5) Enter the directory where the system is located and run Grunt server to start debugging

Note: Only native debugging is currently available and cannot be accessed externally

4. Deployment

1) Grunt Build

[Email Protected]:~/fundtray/frondent$grunt Build

　　　　

　　　　

2) Automatic CDN replacement

[Email Protected]:~/fundtray/frondent$grunt cdnify:dist

　　　　

3) CDN Manual Replacement

Some CDNs cannot be replaced automatically, and can only be replaced manually at this time.

Replace

<link rel= "stylesheet" href= "Bower_components/bootstrap/dist/css/bootstrap.css"/>

For

<linkhref= "//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel= "stylesheet" >

Replace

<linkrel= "stylesheet" href= "Bower_components/font-awesome/css/font-awesome.css"/>

For

<linkhref= "//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel= "stylesheet" >

4) View Dist

Dist directory is the publishing directory, the final site

5) Copy Dist to Web server

Build a Web server (such as Nginx), and copy all the files under Dist for access

Installation, commissioning and deployment of Nodejs + NPM + Bower under ubuntu14.04