Complete front-end engineering framework

1. Basic

(1) Mode: nodejs+angularjs+bootstrap+express

(2) Software: Webstorm

(3) Tools: Bower use it to install the required bootstrap, AngularJS, Gulp, jquery and other packages.

2.new a project, load the required packages, and install the required files (such as HTML, CSS, JS, JSON).

(1) New one Nodejs Express app project

(2) Install the required package with Bower:

Click Webstorm "Terminal" in the bottom left corner and enter the following information in the input box.

Basic Installation

NPM install-g Bower↵ Global Installation Bower

NPM Install--global gulp↵ Installation Gulp (CSS, html, JS, etc code and IMG can be compressed)

Bower Install↵ (Bower Installation library file, enter present init if no Bower.json bower error occurs)

NPM Install↵ (NPM installs Nodejs required files)

Install the required packages

Bower Install angular--save

Bower Install Gulp--save

Bower Install bootstrap--save

Bower Install jquery--save

......

Bower Install XXX--save (with bower installation)

All installed packages are displayed in Package.json, as follows.

{
"name": "Frontend_angular_demo",
"version": "0.0.0",
"Private": true,
"Scripts": {
"Start": "Node./bin/www"
  },
"dependencies": {
" ali-data-mock": "0.1.3",
" ali-data-proxy-lite": "1.1.16",
" body-parser": "~1.13.2",
" Bower": "^1.6.5",
" cookie-parser": "~1.3.5",
" Crypto": "*",
" Debug": "~2.2.0",
" Ejs": "~2.3.3",
" Express": "~4.13.1",
" Morgan": "~1.6.1",
" Serve-favicon": "~2.3.0 "
  },
"Devdependencies": {
"del": "^2.0.2",
" Gulp": "^3.9.0",
" gulp-autoprefixer": "^3.1.0",
" Gulp-cache": "^0.4.0",
" Gulp-clean": "^0.3.1",
" gulp-concat": "^2.6.0",
" gulp-imagemin": "^2.4.0",
" gulp-jshint": "^1.12.0",
" gulp-livereload": "^3.8.1",
" gulp-load-plugins": "^1.1.0",
" gulp-minify-css": "^1.2.1",
" gulp-notify": "^2.2.0",
" gulp-rename": "^1.2.2",
" gulp-ruby-sass": "^2.0.5",
" gulp-uglify": "^1.4.2",
" Gulp-watch": "^4.3.5",
" imagemin-pngquant": "^4.2.0 "
  }
}

(3) required documents (used here to indicate folders)

Project Catalogue

? Bin>www (JS format, which defines the browser running port, such as 3000. )

>?node modules (all library files installed with Bower. )

>?proxy>data proxy.js (proxy server, hide real identity, etc.). )

>?public>?apps>?dist>?css

? js

? img

>?DIST-GULP (contains compressed versions of the same files as the Dist folder, such as CSS, IMG, JS)

>?libs (contains angular components)

>?src>?controller>controller.js (Display data binding on the browser)

>?service>service.js (multiple requests can be written separately, go to the server for data, syntax contains asynchronous requests)

>?views>.html

>angularroute.js (with routing, implement page jump)

>?bower_components

>?routes>user.js (Handling encryption and decryption issues such as login)

>index.js (home, usually pre-and post-logon status settings)

>?views >.html (Introduction of JS, CSS, etc.)

>app.js

>bower.json (defining dependencies)

>gulpfile.json (set compression)

>interface.json (front-end interface)

>package.json (view installation package)

>.BOWERRC (is the bower directory of custom downloaded packages)

Complete front-end engineering framework