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