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

Source: Internet
Author: User

  

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.