[TOC]

nodejs构建前端界面

@(IT技术)[nodejs,前端]

项目名称: lastic

1. 创建并初始化项目

进入工作空间在shell下执行命令

mkdir elastic
cd elastic
npm init

命令运行完成之后，会在当前目录下生成package.json文件

2. 编辑并配置package.json

{
  "name": "elastic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "杨松<syang@amarsoft.com>",
  "license": "ISC"
}

3. 安装angular,bootstrap

npm i  angular@1.2.28 --save
npm i  bootstrap@3.3.6 --save

运行之后，package.json文件会被变成

{
  "name": "elastic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "杨松<syang@amarsoft.com>",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.2.28",
    "bootstrap": "^3.3.6"
  }
}

同时，在当前目录下，生成了目录:node_modules/angular,node_modules/bootstrap,其中所包含的js以及css文件正是相应版本的css文件

4. 增加webpack,gulp支持

在package.json中增加以下设置

"scripts": {
    "build": "webpack",
    "dev": "gulp watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-watch": "^4.3.6",
    "path": "^0.12.7",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-stream": "^3.2.0"
  }